Javascript 如何将 HTML 表格导出为 .xlsx 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37498713/
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
How to export an HTML table as a .xlsx file
提问by Erdeniz Korkmaz
I have a question about exporting an HTML tableas an xlsxfile. I did some work and now I can export it as an xls, but I need to export it as an xlsx.
我有一个关于将HTML 表导出为xlsx文件的问题。我做了一些工作，现在我可以将它导出为xls，但我需要将它导出为xlsx。
Here is my jsFiddle:https://jsfiddle.net/272406sv/1/
这是我的 jsFiddle：https ://jsfiddle.net/272406sv/1/
Here is my HTML:
这是我的 HTML：
<table id="toExcel" class="uitable">
<thead>
<tr>
<th>Kampanya Basligi</th>
<th>Kampanya Türü</th>
<th>Kampanya Baslangi?</th>
<th>Kampanya Bitis</th>
<th style="text-align: center">Aksiyonlar</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Item in campaign.campaignList">
<td> Item.CampaignTitle </td>
<td> Item.CampaignHotelType </td>
<td> Item.CampaignHotelCheckInDate) </td>
<td>Item.CampaignHotelCheckOutDate</td>
<td style="text-align: center">
<button> Some Action </button>
</td>
</tr>
</tbody>
</table>
<button onclick="exceller()">EXCEL</button>
Here is my JavaScript code:
这是我的 JavaScript 代码：
<script>
function exceller() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
var toExcel = document.getElementById("toExcel").innerHTML;
var ctx = {
worksheet: name || '',
table: toExcel
};
var link = document.createElement("a");
link.download = "export.xls";
link.href = uri + base64(format(template, ctx))
link.click();
}
</script>
采纳答案by Adrien
You won't be able to export it as XLSX without going back to the server. A XLSX file is a collection of XML files, zipped together. This means you do need to create multiple files. This is impossible to do with JS, client-side.
如果不返回服务器，您将无法将其导出为 XLSX。XLSX 文件是压缩在一起的 XML 文件的集合。这意味着您确实需要创建多个文件。这在客户端的 JS 中是不可能的。
Instead, you should create a function retrieving the data from your HTML table and send that to you server. The server can then create the XLSX file for you (there are a bunch of libs available for that!) and send it back to the client for download.
相反，您应该创建一个函数，从您的 HTML 表中检索数据并将其发送到您的服务器。然后服务器可以为您创建 XLSX 文件（有很多可用的库！）并将其发送回客户端进行下载。
If you expect to have a huge dataset, the XLSX creation on the server should be done as an async process, where you notify the user when it's done (instead of having the user waiting for the file to be created).
如果您希望拥有一个巨大的数据集，则服务器上的 XLSX 创建应该作为一个异步过程完成，在该过程中您会在完成时通知用户（而不是让用户等待创建文件）。
Let us know which language you use on your server, and we'll be able to recommend you some good libraries.
让我们知道您在服务器上使用哪种语言，我们将能够向您推荐一些好的库。
回答by Travis Clarke
A greatclient-side tool for exporting htmltables to xlsx, xls, csv, or txtis TableExportby clarketm(me). It is a simple, easy-to-implement, full-featured library with a bunch of configurable properties and methods.
一个伟大的客户端工具导出html表来xlsx，xls，csv，或者txt是TABLEEXPORT通过clarketm（我）。它是一个简单、易于实现、功能齐全的库，具有一堆可配置的属性和方法。
Install
安装
$ npm install tableexport
Usage
用法
TableExport(document.getElementsByTagName("table"));
// OR using jQuery
$("table").tableExport();
Documentation
文档
Sample apps to get you started
帮助您入门的示例应用程序
- TableExport + RequireJS
- TableExport + Flask
- TableExport + Webpack 1
- TableExport + Angular 4 + Webpack 2
Check out the compendious docsor just head over to
TableExporton Github for a full list of features.
查看简明文档或直接
TableExport访问 Github 以获取完整的功能列表。
回答by L..
You can use this plug-in for exporting table to .xlsx
您可以使用此插件将表格导出为 .xlsx
回答by Mr.Ngo
Take a look at tableExport.jquery.pluginor tableexport.jquery.plugin
看看tableExport.jquery.plugin或tableexport.jquery.plugin
Code example
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML table Export</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="../lib/js-xlsx/xlsx.core.min.js"></script>
<script type="text/javascript" src="../lib/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="../lib/html2canvas/html2canvas.min.js"></script>
<script type="text/javascript" src="../tableExport.js"></script>
<script type="text/javaScript">
var sFileName = 'ngophi';
function ExportXLSX(){
$('#Event').tableExport({fileName: sFileName,
type: 'xlsx'
});
}
</script>
<style type="text/css">
body {
font-size: 12pt;
font-family: Calibri;
padding : 10px;
}
table {
border: 1px solid black;
}
th {
border: 1px solid black;
padding: 5px;
background-color:grey;
color: white;
}
td {
border: 1px solid black;
padding: 5px;
}
input {
font-size: 12pt;
font-family: Calibri;
}
</style>
</head>
<body>
<a href="#" onClick="ExportXLSX();">DownloadXLSX</a>
<br/>
<br/>
<div id="Event">
<table>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>row1 Col1</td>
<td>row1 Col2</td>
<td>row1 Col3</td>
</tr>
<tr>
<td>row2 Col1</td>
<td>row2 Col2</td>
<td>row2 Col3</td>
</tr>
<tr>
<td>row3 Col1</td>
<td>row3 Col2</td>
<td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
</td>
</tr>
</table>
</div>
</body>
</html>
