Table2excel插件不起作用
我正在开发一个仪表板应用程序，我想实现“下载表为.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"
});
});
});
但它也看起来不太好，当我执行该函数时，我在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文件，请建议。
提前谢谢。修改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：
由于我无法解决这个问题，我试图尝试一些新的东西。我找到了this解决方案，但它仍然有效，但仍然不是我想要的，所以我希望你可以帮助我改进它。
我的表看起来像这样
这就是我得到的结果
首先，如果没有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));
}
THX！
3 个答案:
答案 0 :(得分：1)
在返回之前添加此内容
tab_text = tab_text.replace(/<a class='infobox'[\s\S]*?<\/a>/gi, "");
您可以在此网站上的替换（逗号之前）中播放字符串：regexr.com
有关多行匹配的更多信息here
答案 1 :(得分：0)
确保插件的脚本引用位于jQuery之后，并检查两者是否包含在js代码之前。
答案 2 :(得分：0)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>人数统计</title>
<style type="text/css">
td,
th {
vertical-align: middle !important;
text-align: center;
}
.bg_yellow{
background-color: #fff45c;
}
.bg_green {
background-color: #80c269;
}
</style>
</head>
<body>
<button>导出按钮</button>
<table class="table table-bordered" style="width: 95%; margin: 20px auto;">
<thead>
<tr>
<th scope="col" rowspan="2">a</th>
<th scope="col" colspan="16">b</th>
<th scope="col" colspan="16">c</th>
<th scope="col" colspan="4">d</th>
<th scope="col" rowspan="2">e</th>
</tr>
<tr>
<th scope="col">f</th>
<th scope="col">g</th>
<th scope="col">h</th>
<th scope="col" class="bg_green">i</th>
<th scope="col">j</th>
<th scope="col">k</th>
<th scope="col">l</th>
<th scope="col">m</th>
<th scope="col">n</th>
<th scope="col">o</th>
<th scope="col" class="bg_green">p</th>
<th scope="col">q</th>
<th scope="col">l</th>
<th scope="col">r</th>
<th scope="col" class="bg_green">s</th>
<th scope="col" class="bg_yellow">t</th>
<th scope="col">u</th>
<th scope="col">v</th>
<th scope="col">w</th>
<th scope="col" class="bg_green">x</th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col" class="bg_green">z</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
<th scope="col" class="bg_green">y</th>
<th scope="col" class="bg_yellow">z</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
<th scope="col" class="bg_yellow">z</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow03">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow03">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_yellow03">0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow03">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow03">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_yellow03">0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_yellow">0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_yellow">0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_green">0</td>
<td class="bg_yellow">0</td>
<td></td>
<td></td>
<td></td>
<td class="bg_yellow">0</td>
<td>0</td>
</tr>
<tr>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow">0</td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow">0</td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow">0</td>
<td class="bg_yellow">0</td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow">0</td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow">0</td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow">0</td>
<td class="bg_yellow">0</td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow"></td>
<td class="bg_yellow">0</td>
<td class="bg_yellow">0</td>
</tr>
</tbody>
</table>
<script src="../dist/jquery.js"></script>
<script src="../dist/jquery.table2excel.min.js"></script>
<script>
$(function(){
$("body").on("click","button",function(){
exportExcel();
});
function exportExcel(){
$(".table").table2excel({
exclude: ".noExl",//不导出的表格数据选择器，不导出的数据加class加上 noExl就可以了
name: "Excel Document Name",
filename: "myFileName",
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
}
})
</script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？