使用js将html格式的table =＞ excel格式文件

将html格式的表格导出为excel表格文件

1. 先下载辅助模块.
2. 将辅助模块导入到目标html页面
3. 利用DOM操作, 获取目标表格的内容.
4. 使用辅助模块的功能, 将内容保存为表格文件.

1、 下载辅助模块

这里我使用的是fileSaver, 地址为:
https://github.com/kebingzao/fileSaver_excel
下载js(Blob、FileSaver)文件, 放进你的项目目录:

2、 将辅助模块导入到目标html页面

3、 利用DOM操作获取表格内容

// 获取表格对象, 并保存为blob
    var blob = new Blob([document.getElementById('demo').outerHTML], {
    
    
    //  指定编码类型, 防止乱码
      type: "text/plain;charset=utf-8"
    });

4、使用辅助模块功能, 将内容保存为表文件.

    // 使用FileSaver的saveAs方法保存. 
    saveAs(blob,  "export.xls");

总结:

完整代码:
页面是这个样(根据id获取到该table对象):

<table id="demo">
        <thead class="top">
            <td>名字</td>
            <td>性别</td>
            <td>年龄</td>
        </thead>
        <tr>
          <td>james</td>
          <td>男</td>
          <td>35</td>
        </tr>
        <tr>
          <td>kobe</td>
          <td>男</td>
          <td>42</td>
        </tr>
        <tr>
          <td>wade</td>
          <td>男</td>
          <td>35</td>
        </tr>
    </table>

js代码:

<script>
  // 这里写的是点击函数, 方法为下面的
  $('.btn').on('click', () => {
    
    
  saveAsTable()
  }) 

  function saveAsTable() {
    
    
     // 获取表格对象
    var blob = new Blob([document.getElementById('demo').outerHTML], {
    
    
      type: "text/plain;charset=utf-8"
    });
    // 使用FileSaver的saveAs方法保存. 
    saveAs(blob,  "mangoo.xls");
  }
</script>

最后结果:
mangoo.xls

人生没有回头路, 走的每一步都算数! 加油!!!