使用 Javascript 將 HTML 表格導出到 Excel

Question

我正在將HTML表導出到xls格式。 導出后，如果您在 Libre Office 中打開它，它工作正常，但同樣會在 Microsoft Office 中打開一個空白屏幕。

我不想要jquery解決方案，請提供任何javascript解決方案。 請幫忙。

 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>

Answer 1

2016 年 7 月 12 日，微軟推送了 Microsoft Office 的安全更新。 此更新的影響之一是防止來自不受信任域的 HTML 文件被 Excel 打開，因為它們無法在保護模式下打開。

還有一個注冊表設置可以防止 Excel 打開帶有 .XLS 文件擴展名且內容與官方 XLS 文件格式不匹配的文件，盡管它默認為“警告”，而不是“拒絕”。

在此更改之前，可以將 HTML 數據保存到具有 XLS 擴展名的文件中，並且 Excel 將正確打開它 - 可能會首先發出警告，該文件與 Excel 格式不匹配，具體取決於用戶的ExtensionHardening值注冊表項（或相關的配置值）。

Microsoft 已經創建了一個關於新行為的知識庫條目，並提供了一些建議的解決方法。

一些以前依賴將 HTML 文件導出為 XLS 的 Web 應用程序由於更新而遇到了麻煩——SalesForce就是一個例子。

2016 年 7 月 12 日之前對此和類似問題的回答現在可能無效。

值得注意的是，從遠程數據在瀏覽器上生成的文件不會違反這種保護； 它只會阻止從不受信任的遠程來源下載文件。 因此，一種可能的方法是在客戶端本地生成帶有 .XLS 標簽的 HTML 文件。

當然，另一個是生成有效的 XLS 文件，然后 Excel 將在保護模式下打開該文件。

更新：微軟已經發布了一個補丁來糾正這種行為： https : //support.microsoft.com/en-us/kb/3181507

Answer 2

SheetJS似乎很適合這個。

要將您的表格導出為 Excel 文件，請使用此鏈接中的代碼（以及 SheetJS）

只需將table元素的 id 插入export_table_to_excel

看演示

Answer 3

如果 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>

Answer 4

將此添加到您的頭上：

<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/

Answer 5

試試這個

<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");

Answer 6

您可以使用tableToExcel.js導出 Excel 文件中的表格。

這以下列方式工作：

1）。 在您的項目/文件中包含此 CDN

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

2）。 使用 JavaScript：

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: `export.xls`, // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}

3）。 或者通過使用 Jquery

<button id="btnExport">EXPORT REPORT</button>

$(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `export.xls`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
});

您可以參考此 github 鏈接以獲取任何其他信息

https://github.com/linways/table-to-excel/tree/master

或參考現場示例訪問以下鏈接

https://codepen.io/rohithb/pen/YdjVbb

這將下載 export.xls 文件

希望這會幫助某人:-)

Answer 7

<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>

Answer 8

如果您有太多列，請嘗試使用此代碼。 您可以輕松拆分。

 function iterate( tab, startIndex , rowCount){ var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>"; var textRange; var j=0; J=startIndex; for(j = startIndex ; j < rowCount ; 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)); } function fnExcelReport() { var indirilecekSayi = 250; var toplamSatirSayisi = 0; var baslangicSAyisi = 0; var sonsatirsayisi = 0; tab = document.getElementById('myTable'); // id of table var maxRowCount = tab.rows.length; toplamSatirSayisi = maxRowCount; sonsatirsayisi=indirilecekSayi; var kalan = toplamSatirSayisi % indirilecekSayi; var KalansızToplamSatir=ToplamSatirSayisi-kalan; var kacKati=Tsh / indirilecekSayi; alert(maxRowCount); alert(kacKati); for (let index = 0; index <= kacKati; index++) { if (index==kacKati) { baslangicSAyisi =sonsatirsayisi; sonsatirsayisi=sonsatirsayisi+kalan; iterate(tab, baslangicSAyisi, sonsatirsayisi); }else{ iterate(tab , baslangicSAyisi , sonsatirsayisi); baslangicSAyisi=sonsatirsayisi; sonsatirsayisi=sonsatirsayisi+indirilecekSayi; if(sonsatirsayisi>ToplamSatirSayisi){ sonsatirsayisi=baslangicSAyisi; } } } }