如何将html表格导出为xlsx文件
我有一个关于导出一个HTML表格作为一个xlsx文件的问题。 我做了一些工作，现在我可以将其导出为xls ，但是我需要将其导出为xlsx 。
这里是我的jsFiddle： https ://jsfiddle.net/272406sv/1/
在这里我的HTML：
<table id="toExcel" class="uitable"> <thead> <tr> <th>Kampanya Başlığı</th> <th>Kampanya Türü</th> <th>Kampanya Başlangıç</th> <th>Kampanya Bitiş</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> 在这里我的js：
<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>
您将无法将其导出为XLSX而无需返回到服务器。 XLSX文件是压缩在一起的XML文件的集合。 这意味着你需要创build多个文件。 这是不可能与JS，客户端。
相反，你应该创build一个函数从你的HTML表中检索数据并发送给你的服务器。 然后，服务器可以为你创buildXLSX文件（这里有很多可用的库文件），然后发回客户端进行下载。
如果你希望有一个巨大的数据集，服务器上的XLSX创build应该作为一个asynchronous过程完成，在完成时通知用户（而不是让用户等待文件被创build）。
让我们知道您在服务器上使用哪种语言，我们将能够向您推荐一些好的库。
一个很好的将html表格导出到xlsx ， xls ， csv或txt客户端工具是由clarketm （ me ） 提供的TableExport 。 这是一个简单，易于实现，function齐全的库，具有一系列可configuration的属性和方法。
安装
$ npm install tableexport
用法
TableExport(document.getElementsByTagName("table")); // OR using jQuery $("table").tableExport();
文档
示例应用程序，让你开始
- TableExport + RequireJS
- TableExport +烧瓶
- TableExport + Webpack 1
- TableExport + Angular 4 + Webpack 2
查看简明的文档，或者
TableExportGithub上的TableExport获取完整的function列表。破坏者警报：
看看tableExport.jquery.plugin或者tableexport.jquery.plugin
代码示例
<!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>
您可以使用这两个插件xlsx和文件导出文件。
例-
import { utils, write, WorkBook } from 'xlsx'; import { saveAs } from 'filesaver.js'; table = [ { First: 'one', Second: 'two', Third: 'three', Forth: 'four', Fifth: 'five' }, { First: 'un', Second: 'deux', Third: 'trois', Forth: 'quatre', Fifth: 'cinq' }, ]; const ws_name = 'SomeSheet'; const wb: WorkBook = { SheetNames: [], Sheets: {} }; const ws: any = utils.json_to_sheet(this.table); wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws; const wbout = write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' }); function s2ab(s) { const buf = new ArrayBuffer(s.length); const view = new Uint8Array(buf); for (let i = 0; i !== s.length; ++i) { view[i] = s.charCodeAt(i) & 0xFF; }; return buf; } saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'exported.xlsx');
您可以使用此插件将表格导出到.xlsx