Table2excel插件不起作用
ams*_*alk 13 html javascript jquery jsp jquery-plugins
我正在开发一个仪表板应用程序,我想实现"下载表为.xls"功能.
在此链接上,您可以看到表格如何看起来像 仪表板
我找到了一个库,其中还包括解释设置的教程.正如您在下面的代码中所看到的,我已经做了或多或少的事情,就像它解释的那样.但是它不起作用,并且由于某种原因,该表将不会被导出.
如您所见,我已将jquery.table2excel.js资源与用于此页面的所有其他资源一起包含在内.我还检查了.js文件在加载页面后是否可用,并且看起来也很好.
我也尝试过这个
$(function () {
document.getElementById('btnExport').addEventListener("click", function () {
document.getElementById('myTable').table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
但它也看起来不太好,当我执行该函数时,我在debugg控制台中收到此消息
TypeError: document.getElementById(...).table2excel is not a function
这就是我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文件,请建议.
Thx提前.
编辑1:
我已经更改了函数,它看起来像我在下面发布的代码.如果我console.log("exporting...");在$(".table2excel").table2excel({ ... });"exporing ..." 之前或之后执行,将在控制台中打印出来.显然,将jQuery排除为问题的潜在原因.
<script>
$(function () {
$('#btnExport').click(function () {
console.log("exporting...");
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
</script>
编辑2:
由于我无法解决这个问题,我试图尝试新的东西.我找到了这个解决方案并且它可以工作,但仍然不是我想要的,所以我希望你可以帮助我改进它.
我的桌子看起来像这样
这就是我得到的结果
首先,没有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
有关多行匹配的更多信息请参见此处