使用Javascript将HTML表格导出到Excel
我正在将HTML表导出到xls foramt。 导出后，如果您在Libre Office中打开它，它工作正常，但同样在Microsoft Office中打开一个空白屏幕。
我不想要一个jquery解决scheme，请提供任何javascript解决scheme。 请帮忙。
function fnExcelReport() { var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>"; var textRange; var j = 0; tab = document.getElementById('table'); // id of table for (j = 0; j < tab.rows.length; j++) { tab_text = tab_text + tab.rows[j].innerHTML + "</tr>"; //tab_text=tab_text+"</tr>"; } tab_text = tab_text + "</table>"; tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer { txtArea1.document.open("txt/html", "replace"); txtArea1.document.write(tab_text); txtArea1.document.close(); txtArea1.focus(); sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls"); } else //other browser not tested on IE 11 sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text)); return (sa); }
<iframe id="txtArea1" style="display:none"></iframe> Call this function on <button id="btnExport" onclick="fnExcelReport();"> EXPORT </button> <table id="table"> <thead> <tr> <th>Head1</th> <th>Head2</th> <th>Head3</th> <th>Head4</th> </tr> </thead> <tbody> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> </tr> </tbody> </table>
在2016-07-12，微软推出了微软Office的安全更新 。 此更新的一个效果是防止来自不受信任的域的HTML文件被Excel打开，因为它们无法在“保护”模式下打开。
还有一个registry设置，可以防止Excel打开文件扩展名为.XLS的文件，其内容与官方XLS文件格式不匹配，但默认为“警告”而不是“拒绝”。
在此更改之前，可以将HTML数据保存为带有XLS扩展名的文件，并且Excel可以正确打开该文件 – 可能会首先警告该文件与Excel格式不匹配，具体取决于ExtensionHardening的用户值registry项（或相关的configuration值）。
微软已经提出了一些关于新行为的知识库条目，并提供了一些build议的解决方法。
以前依赖将HTML文件导出为XLS的几个Web应用程序由于更新而遇到麻烦 – SalesForce就是一个例子。
从2016年7月12日之前回答这个问题和类似的问题可能现在是无效的。
值得注意的是，在浏览器上从远程数据制作的文件不会受到这种保护。 它只会阻止从不受信任的远程源下载的文件。 因此，一种可能的方法是在客户端本地生成.XLS标记的HTML文件。
另一个当然是生成一个有效的XLS文件，然后Excel将以保护模式打开。
更新 ：Microsoft发布了一个修补程序来更正此行为： https : //support.microsoft.com/en-us/kb/3181507
SheetJS似乎是完美的。
要将表格导出为excel文件，请使用此链接中的代码（以及SheetJS）
只需将你的table元素的id插入到export_table_to_excel
看演示
如果CSV格式对你有好处，这里是一个例子。
- 好的…我只是读了一个评论，你明确地说它不适合你。 在编码之前，我不好学习阅读。
据我所知，Excel可以处理CSV。
function fnExcelReport() { var i, j; var csv = ""; var table = document.getElementById("table"); var table_headings = table.children[0].children[0].children; var table_body_rows = table.children[1].children; var heading; var headingsArray = []; for(i = 0; i < table_headings.length; i++) { heading = table_headings[i]; headingsArray.push('"' + heading.innerHTML + '"'); } csv += headingsArray.join(',') + ";\n"; var row; var columns; var column; var columnsArray; for(i = 0; i < table_body_rows.length; i++) { row = table_body_rows[i]; columns = row.children; columnsArray = []; for(j = 0; j < columns.length; j++) { var column = columns[j]; columnsArray.push('"' + column.innerHTML + '"'); } csv += columnsArray.join(',') + ";\n"; } download("export.csv",csv); } //From: http://stackoverflow.com/a/18197511/2265487 function download(filename, text) { var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text)); pom.setAttribute('download', filename); if (document.createEvent) { var event = document.createEvent('MouseEvents'); event.initEvent('click', true, true); pom.dispatchEvent(event); } else { pom.click(); } }
<iframe id="txtArea1" style="display:none"></iframe> Call this function on <button id="btnExport" onclick="fnExcelReport();">EXPORT </button> <table id="table"> <thead> <tr> <th>Head1</th> <th>Head2</th> <th>Head3</th> <th>Head4</th> </tr> </thead> <tbody> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> </tr> </tbody> </table>
添加到你的头：
<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>
并将其添加为您的javascript：
<script type="text/javascript"> var tableToExcel = (function() { 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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })() </script>
Jfiddle： http : //jsfiddle.net/cmewv/537/
尝试这个
<table id="exportable"> <thead> <tr> //headers </tr> </thead> <tbody> //rows </tbody> </table>
这个脚本
var blob = new Blob([document.getElementById('exportable').innerHTML], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }); saveAs(blob, "Report.xls");
<hrml> <head> <script language="javascript"> function exportF() { //Format your table with form data document.getElementById("input").innerHTML = document.getElementById("text").value; document.getElementById("input1").innerHTML = document.getElementById("text1").value; var table = document.getElementById("table"); var html = table.outerHTML; var url = 'data:application/vnd.C:\\Users\WB-02\desktop\Book1.xlsx,' + escape(html); // Set your html table into url var link = document.getElementById("downloadLink"); link.setAttribute("href", url); link.setAttribute("download", "export.xls"); // Choose the file name link.click(); // Download your excel file return false; } </script> </head> <body> <form onsubmit="return exportF()"> <input id="text" type="text" /> <input id="text1" type="text" /> <input type="submit" /> </form> <table id="table" style="display: none"> <tr> <td id="input"> <td id="input1"> </td> </tr> </table> <a style="display: none" id="downloadLink"></a> </body> </html>