利用JavaScript将HTML表格导出为Excel文件

共计 1687 个字符，预计需要花费 5 分钟才能阅读完成。

网上各种找

首先，肯定是找一下有没有别人写好的库，自己写不现实的。最终找到了 js-xlsx，评价还不错，不过已经好久没有更新了，将就用用看咯。

js-xlsx 虽然支持修改导出文件的样式，不过是在它的专业版中，其分为社区版和专业版，社区版是开源的，但是却不支持修改导出文件的样式，专业版拥有更多的功能，这其中就包括修改样式。如果需要使用专业版，要邮件联系开发者，去咨询价格，购买它。

好在又找到了 xlsx-style 这个项目（同样的好久没有更新了，凑合着用），它可以对导出的 excel 文件进行一些样式上的修改。

开干

<script src="js/xlsx.extendscript.js"></script>
<script src="js/xlsx-style/xlsx.full.min.js"></script>
<script src="js/export.js"></script>

<script>
  function btn_export() {var table1 = document.querySelector("#table1")
    var sheet = XLSX2.utils.table_to_sheet(table1)

    // 设置合并单元格垂直居中
    sheet["!merges"].forEach((item) => {
      var col = "0"
      var row = item.s.r + 1
      switch (item.s.c) {
        case 0:
          col = "A"
          break
        case 1:
          col = "B"
          break
        case 2:
          col = "C"
          break
        case 3:
          col = "D"
          break
      }

      if (col == "D") {sheet[col + row].t = "n"
        sheet[col + row].s = {
          alignment: {
            vertical: "center",
            horizontal: "center",
            wrapText: true,
          },
        }
      } else {sheet[col + row].s = {
          alignment: {
            vertical: "center",
            wrapText: true,
          },
        }
      }
    })

    // 设置 D 列垂直居中
    for (var i = 2; i <= sheet["!merges"][0].e.r + 1; i++) {sheet["D" + i].t = "n"
      sheet["D" + i].s = {
        alignment: {
          vertical: "center",
          horizontal: "center",
          wrapText: true,
        },
      }
    }

    // 设置单元格列宽
    sheet["!cols"] = [{wch: 14,},
      {wch: 20,},
      {wch: 20,},
    ]

    openDownloadDialog(sheet2blob(sheet), " 下载.xlsx")
  }
</script>

一般情况下用 xlsx.core.min.js 就够了，xlsx.full.min.js 则是包含了所有功能模块。

但是，xlsx.full.min.js 和 xlsx-style/xlsx.full.min.js（两个 js 都加密了）暴露出来的变量都叫 XLSX，xlsx-style 这个 js 文件里又没有 XLSX.utils 这个方法，还是后引入的，就会把前面的 XLSX 给覆盖了，所以会报错。

解决方法是删掉 xlsx.full.min.js，改用 xlsx.extendscript.js（这个 js 没加密），并把暴露出来的变量修改为 XLSX2。

其他库

如果觉得 xlsx-style 的功能不够全面，不能实现需求，这里再推荐一个项目 ExcelJS，这个项目的功能更加全面，而且项目也还在维护，可以试试看能否满足需求。

关联资源下载

包含 3 个 js 文件。

下载地址：https://gaga.lanzoum.com/ixnMF0xz6wwj

参考

• 参考一：https://segmentfault.com/a/1190000019700368
• 参考二：https://www.cnblogs.com/liuxianan/p/js-excel.html
• 参考三：https://blog.csdn.net/FE_dev/article/details/106396416