前端浏览器json数组转excel(.csv .xlsx)文件下载

看了下目前接触到的解决方案，确定了两种比较稳定靠谱的实现方案：

方案一

适用场景：.csv后缀的文件，对数据样式无要求；

优点：简单到无以复加

经测试，代码可直接运行，生成的csv文件也可以另存为.xlsx的文件。

const json = [];
for (let i = 0; i < 10000; i++) {
  json.push({ name: "赵丽颖", age: 30, sex: "女" });
}
let str = `姓名,年龄,性别\n`;
for (let i = 0; i < json.length; i++) {
  for (const k in json[i]) {
    str += `${json[i][k] + "\t"},`;
  }
  str += "\n";
}
// 生成下载地址方法一
let blob = new Blob([str], { type: "text/plain;charset=utf-8" });
//解决中文乱码问题
blob = new Blob([String.fromCharCode(0xfeff), blob], {
  type: blob.type,
});
const uri = window.URL.createObjectURL(blob);
// 生成下载地址方法二
// const uri =
//   "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
const link = document.createElement("a");
link.href = uri;
link.download = "test.csv";
link.click();

方案二

适用场景：几乎所有后缀的excel文件，可高度定制，可以导出、解析表格，功能齐全，样式可定制，单元格公式等等，并兼容到ie10；

需要加载xlsx包，或者是xlsx插件，包体积7.5M，不介意的可以采用这种方法；

具体文档可参见:xlsx - npm (npmjs.com)

下面是个简单的例子，直接通过链接引入xlsx插件，

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.4/xlsx.core.min.js" 
integrity="sha512-guz6jm9TcLvdhaE5NtzYXG8vcxykUCNPNkVqT9ao2IT0lqQp923ROr2Pip5c7pB+ubuutLKxfEc1wAODydei0g==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      const json = [];
      for (let i = 0; i < 10000; i++) {
        json.push({ name: "赵丽颖", age: 30, sex: "女" });
      }
      function downloadxlxs() {
        // 如果要导出xlsx格式的用下面的方案
        console.log("XLSX", XLSX);
        const sheet_1 = XLSX.utils.json_to_sheet(json);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, sheet_1, "test");
        const wopts = {
          bookType: "xlsx", // 要生成的文件类型
          // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
          bookSST: false, 
          type: "binary",
        };
        const wbout = XLSX.write(wb, wopts);
        const blob = new Blob([s2ab(wbout)], {
          type: "application/octet-stream",
        });
        download(blob, "xlsx测试文件.xlsx");
      }

      // 字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      function download(blob, name) {
        // 用URL.createObjectURL下载
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = name;
        a.click();
      }
    </script>

如果要深度使用xlsx，可以先将XLSX对象打印出来，把里面的属性对照着文档查看使用场景以及使用方法。

欢迎交流~