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

- Shrinivas Pai

---

你尝试过在Excel中打开一个真正的HTML文件，而不仅仅是一个表格<table>吗？或者将其保存为CSV格式？ - Aprillion

请参见：https://dev59.com/y1oT5IYBdhLWcg3wnQf9 - Axel Richter

@Aprillion 我尝试使用CSV格式，但我不想使用CSV作为扩展名。 - Shrinivas Pai

@AxelRichter，我不能让用户按照设置中的步骤来获取结果。 - Shrinivas Pai

@Srinivas Pai：当然不行。所以请停止将HTML导出为伪造的*.xls文件。Datatables是存在的。 - Axel Richter

Answer 1

2016年7月12日，微软推出了一项针对Microsoft Office的安全更新。该更新的一个影响是防止Excel打开非受信任域中的HTML文件，因为它们无法在保护模式下打开。

还有一个注册表设置，可以防止Excel打开扩展名为.XLS的文件，如果其内容不符合官方的XLS文件格式，则默认为“警告”，而不是“拒绝”。

在此更改之前，可以将HTML数据保存到具有XLS扩展名的文件中，并且Excel会正确地打开它-取决于用户对ExtensionHardening注册表键（或相关配置值）的值，可能会首先发出警告，指出文件与Excel格式不匹配。

微软已经发布了一个知识库条目，介绍了新行为及其一些建议的解决方法。

几个之前依赖将HTML文件导出为XLS的网络应用程序因此更新而遇到了问题——SalesForce就是其中一个例子。

在2016年7月12日之前的回答以及类似问题的回答现在可能已经无效了。

值得注意的是，从远程数据生成的浏览器端文件不会受到此保护的影响；它只会阻碍从未受信任的远程源下载的文件。因此，一种可能的方法是在客户端本地生成带有.XLS标签的HTML文件。

当然，另一种方法是生成有效的XLS文件，然后Excel会在受保护模式下打开它。 更新：微软发布了一个补丁来纠正这个行为：https://support.microsoft.com/en-us/kb/3181507。

- S McCrohan

---

不想抢答，但我觉得值得一提的是，Excel可以打开.CSV和.TSV文件，这两种文件格式在Javascript中非常容易创建。我没有看到任何特定的文档说明他们已经改变了这种行为；也许这就是你要找的东西？ - MikeJannino

Answer 2

SheetJS 似乎非常适合这个任务。

若要将您的表格导出为 Excel 文件，请使用此链接(连同 SheetJS) 中的代码。

只需将您的table元素的ID插入到 export_table_to_excel中即可。

请参见演示。

- jlynch630

---

看起来好像有一段时间没有更新了 - 它是否是最新的？（实际上我不知道任何可能导致它不是最新的格式更改，但如果我建议它，这将是我得到的第一个问题...） - S McCrohan

我认为格式没有改变，Excel 给我的唯一警告是：“来自互联网的文件可能包含病毒。启用编辑？” - jlynch630

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: https://dev59.com/eXE85IYBdhLWcg3wMQhm#18197511
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>

- ElMesa

---

非常感谢，这确实帮了我很多。请问有人能建议一下如何在CSV文件中将表头设置为加粗吗？ - Alexa

CSV文件不存储样式数据，因此不可能实现。您可能希望将相同的数据作为电子表格（Microsoft Excel或Libre Office Calc）进行处理，这样可以设置样式。假设您使用的是Windows，并且您想要一个Excel文件，您可以通过使用PowerShell模块ImportExcel（https://github.com/dfinke/ImportExcel）来实现以下操作：（1）读取CSV文件（2）创建具有表格的Excel文件（整个表格都会被设置样式，而不仅仅是标题加粗），但这并不是一件简单的事情。很抱歉，我无法在这方面为您提供更多帮助。如果您想尝试，请祝您好运。 - ElMesa

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/

- Connor Meeks

---

如果您想指定导入的Excel文件的名称，该怎么办？例如，如果您希望在下载时将文件命名为“example”？ - Jesse James

我实现了这个解决方案，它像魔术般地正常工作！谢谢，伙计。 - Isma

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

- Tarek Salah uddin Mahmud

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文件。

希望这能帮助到某个人 :-)

- Aman Kumar Gupta

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>

- Anuruddh Mishra

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

        }
            

    }

} 

- travellerguy