javascript Table2excel 插件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30189310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table2excel plugin does not work
提问by amsalk
I am working on a dashboard app and I would like to implement "download table as .xls" feature.
我正在开发一个仪表板应用程序，我想实现“将表下载为 .xls”功能。
On this link you can see how the table looks like dashboard
在此链接上，您可以看到表格的外观如何与 仪表板
I have found a librarywhich also includes the tutorial that explains the set up. As you can see in the code below I have done more or less everything like it was explained. However it does not work and for some reason the table will not be exported.
我找到了一个库，其中还包含解释设置的教程。正如您在下面的代码中看到的那样，我或多或少地做了所有解释。但是它不起作用，并且由于某种原因该表不会被导出。
As you can see, I have included jquery.table2excel.jsin the resources together with all other resources which are used for this page. I have also checked if the .jsfile is available after the page is loaded and it also looks good.
如您所见，我已将jquery.table2excel.js资源与用于此页面的所有其他资源一起包含在资源中。我还检查.js了页面加载后文件是否可用，并且看起来也不错。
I have also tried this
我也试过这个
$(function () {
document.getElementById('btnExport').addEventListener("click", function () {
document.getElementById('myTable').table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
but it also does not look well and when I execute the function I get this message in the debugg console
但它看起来也不太好，当我执行该函数时，我在调试控制台中收到此消息
TypeError: document.getElementById(...).table2excel is not a function
TypeError: document.getElementById(...).table2excel is not a function
This is how my index.jsplooks like at the moment
这就是我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 -->
I am realy not sure what could cause this problem or do I have an error in the jQuery syntax. It could be also that the lib is not inportet correctly within .jsppage but this is the way which was working for me in the past. I guess that I am using right jQueryversion since jQuery datePickerworks fine.
我真的不确定是什么导致了这个问题，或者我在 jQuery 语法中有错误。也可能是 lib 在.jsp页面内没有正确导入，但这是过去对我有用的方式。我想我使用的是正确的jQuery版本，因为jQuery datePicker工作正常。
If you are able to see what could case this issue, please help me to fix it. If you have any better idea how to export a table as an excel file please suggest.
如果您能看到可能会导致此问题的原因，请帮助我解决此问题。如果您有更好的想法如何将表格导出为 excel 文件，请提出建议。
Thx in advance.
提前谢谢。
Edit 1:
编辑1：
I have changed the function and it looks like the code I have posted below. If I execute console.log("exporting...");before or after $(".table2excel").table2excel({ ... });"exporing..." will be printed out in the console. Obviously that excludes jQuery as a potential cause of the problem.
我已经更改了功能，它看起来像我在下面发布的代码。如果我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>
Edit 2:
编辑2：
Since I was not able to fix this, I have tried to try something new. I have found thissolutions and it works but still not as I would really like to, so I hope that you can help me to improve it.
由于我无法解决这个问题，我试图尝试一些新的东西。我找到了这个解决方案并且它有效，但仍然不是我真正想要的，所以我希望你能帮助我改进它。
My table looks like this
我的桌子看起来像这样
and this is what I get as a result
这就是我得到的结果
First of all it really looks strange without excel grid, do you have an Idea why the file is exported without it and how can I add it?
首先，它在没有 excel 网格的情况下看起来真的很奇怪，你知道为什么没有它就导出文件，我该如何添加它？
Second I would like to remove the column after YTD where the additional infos are presented. Is it somehow possible to adjust the tab_text.replace(...)below in order to achive this
其次，我想在 YTD 之后删除显示附加信息的列。是否有可能以某种方式调整tab_text.replace(...)以下内容以实现这一目标
in html it looks like this
在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 looks like this
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!
谢谢！
回答by robotik
add this before return
在返回之前添加这个
tab_text = tab_text.replace(/<a class='infobox'[\s\S]*?<\/a>/gi, "");
you can play around the string in the replace (before the comma) on this site: regexr.com
您可以在此站点上的替换（逗号之前）中使用字符串：regexr.com
more info on multiline match here
关于多行匹配的更多信息在这里
回答by Ricky
Make sure the script reference for your plug-in is after the jQuery one, and also check both are included before your js code.
确保您的插件的脚本参考在 jQuery 之后，并检查两者都包含在您的 js 代码之前。
回答by Ricky
<!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>
