使用原生JS将html表格保存为excel

<div id="table_wrapper">
 <table bordercolor="black" class="tableA">
    <tr class="title">
      <th colspan="4">学生信息</th>
    </tr>
    <tr>
      <th>名字</th>
      <th>性别</th>
      <th>年龄</th>
      <th>班级</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>19</td>
      <td>1班</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>男</td>
      <td>20</td>
      <td>2班</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>21</td>
      <td>3班</td>
    </tr>
    <tr class="footer">
      <td colspan="4">总人数：3人</td>
    </tr>
  </table>
</div>

<a id="down-file" href="#">点击下载文件</a>

window.onload = function() { 
  var oTable = document.getElementById("table_wrapper").innerHTML;
  var excelHtml = ` <html> <head> <meta charset='utf-8' /> <style> .tableA { border-collapse: collapse; } .tableA .title th{ height: 50px; font-size: 24px; font-family: '微软雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> ${ oTable} </body> </html> `;

  // 创建 Blob 对象
  var excelBlob = new Blob([excelHtml], {  type: "application/vnd.ms-excel" });
  var oA = document.getElementById("down-file");
  
  // 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的 URL 字符串
  // 这里 URL.createObjectURL(excelBlob) 会创建一个URL 的 Blob 对象
  oA.href = URL.createObjectURL(excelBlob);
  oA.download = "test.xls";

  oA.click = function() { 
    this.click();
  };
};

这个主要使用了 Blob 对象。Blob 对象表示一个不可变、原始数据的类文件对象。
第一个参数是要转换为 Blob 对象的数据（要用[]包裹），第二个参数是要转换的数据的类型。
这里要转换为 Excel 所以 type 写成：application/vnd.ms-excel。

给 <a></a> 标签的 href 属性添加 URL的Blob对象 后，每当点击这个链接，就会将 Blob 对象保存为指定类型的文件。

Demo体验地址：https://liuyib.github.io/blog/demo/blog/c-html-to-excel/

以上 ?

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《使用原生JS将html表格保存为excel》