我正在开发一个仪表板应用程序，我想实现“将表格下载为 .xls”功能。
在这个链接上你可以看到表格的样子 dashboard
我找到了 library其中还包括解释设置的教程。正如您在下面的代码中看到的那样，我或多或少地完成了所解释的所有事情。然而，它不起作用，并且由于某种原因，该表将不会导出。
如您所见，我在资源中包含了 jquery.table2excel.js 以及用于此页面的所有其他资源。我还检查了页面加载后 .js 文件是否可用，它看起来也不错。
这个我也试过
$(function () {
document.getElementById('btnExport').addEventListener("click", function () {
document.getElementById('myTable').table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
但它看起来也不太好，当我执行该函数时，我在调试控制台中收到此消息
TypeError: document.getElementById(...).table2excel 不是函数
这就是我的 index.jsp 目前的样子
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KPI Admin</title>
<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/addition.css" />" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="<c:url value="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />"></script>
<script src="<c:url value="http://code.jquery.com/ui/1.9.2/jquery-ui.js" />"></script>
<script src="<c:url value="/resources/js/bootstrap.js" />"></script>
<script src="<c:url value="/resources/js/addition.js" />"></script>
<script src="<c:url value="/resources/js/jquery.table2excel.js" />"></script>
<script>
$(function () {
document.getElementById('btnExport').addEventListener("click", function () {
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- /.nav -->
</nav>
<div class="container">
<div class="starter-template">
<ul class="nav nav-tabs">
<!-- /.tabs -->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<form:form action="/KPIAdmin/kpis" method="get">
<div class="row form-inline">
<div class="form-group">
<label for="date">Date</label>
<input id="startDatePicker" type="text" class="form-control" name="date" value="${date}" >
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
<br>
<div class="table-responsive">
<table id="myTable" class="table table-bordered table2excel">
<thead>
<tr>
<td>Name</td>
<td>Last import</td>
<td>Last value</td>
<td colspan="4">Values</td>
<td colspan="3">Targets</td>
<td colspan="3">Score</td>
<td>Action</td>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-center" style="font-weight: 700;">DTD</td>
<td class="text-center" style="font-weight: 700;">WTD</td>
<td class="text-center" style="font-weight: 700;">MTD</td>
<td class="text-center" style="font-weight: 700;">YTD</td>
<td class="text-center" style="font-weight: 700;">0</td>
<td class="text-center" style="font-weight: 700;">100</td>
<td class="text-center" style="font-weight: 700;">150</td>
<td class="text-center" style="font-weight: 700;">WTD</td>
<td class="text-center" style="font-weight: 700;">MTD</td>
<td class="text-center" style="font-weight: 700;">YTD</td>
<td></td>
</tr>
<c:forEach var="row" items="${rows}" varStatus="loop">
<!-- /.loop that creates the table -->
</c:forEach>
<tr>
<!-- /. last row mean -->
</tr>
</table>
</div>
</form:form>
<button id="btnExport" class="btn btn-default">Export as .xls</button>
</div>
<div class="tab-pane fade" id="B"> <!-- Content inside tab B --> </div>
<div class="tab-pane fade" id="C"> <!-- Content inside tab C --> </div>
</div>
</div>
</div><!-- /.container -->
我真的不确定是什么导致了这个问题，或者我在 jQuery 语法中有错误。也可能是 lib 在 .jsp 页面中没有正确输入，但这是过去对我有用的方式。我想我使用的是正确的 jQuery 版本，因为 jQuery datePicker 工作正常。
如果您能看到导致此问题的原因，请帮助我解决它。如果您对如何将表格导出为 Excel 文件有任何更好的想法，请提出建议。
提前致谢。
编辑 1:
我已经更改了函数，它看起来像我在下面发布的代码。如果我在 $(".table2excel").table2excel({ ... }); 之前或之后执行 console.log("exporting..."); "exporing...”将在控制台中打印出来。显然，这排除了 jQuery 作为问题的潜在原因。
<script>
$(function () {
$('#btnExport').click(function () {
console.log("exporting...");
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
</script>
编辑 2:
由于我无法解决这个问题，所以我尝试尝试一些新的东西。我找到了 this解决方案并且它有效，但仍然不是我真正想要的，所以我希望你能帮助我改进它。
我的 table 是这样的
这就是我得到的结果
首先，没有 excel 网格看起来真的很奇怪，你知道为什么导出文件时没有它吗？我该如何添加它？
其次，我想删除 YTD 之后显示附加信息的列。是否可以通过某种方式调整下面的 tab_text.replace(...) 以实现此目的
在 html 中它看起来像这样
</td><td width='20px'>
<a class='infobox' href=''>
<img src='img/info.jpg' alt='info' width='18' height='18'>
<span> Service Engineer: ... <br>
Datasource: ...
</span>
</a>
</tr>
JavaScript 函数看起来像这样
function exportExcelReport(tblId) {
var tab_text = "<table border='2px'><tr>";
var table = document.getElementById(tblId);
var style;
for (var j = 0; j < table.rows.length; j++) {
style = table.rows[j].className.split(" ");
if (style.length < 2)
tab_text = tab_text + table.rows[j].innerHTML + "</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<a[^>]*>|<\/a>/g, "");
tab_text = tab_text.replace(/<img[^>]*>/gi, "");
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");
return window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
}
谢谢!
最佳答案
在返回之前添加这个
tab_text = tab_text.replace(/<a class='infobox'[\s\S]*?<\/a>/gi, "");
您可以在本网站上的替换(逗号之前)中使用字符串:regexr.com
有关多行匹配的更多信息 here
关于javascript - Table2excel 插件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30189310/