vue中使用XLSX导出

sheetjs导出

<template>
  <section>
    <button @click="handleTest">导出Excel</button>
  </section>
</template>

import {saveAs} from "file-saver";
import XLSX from "xlsx";

export default {
  name: "XlsxExport",
  methods: {
    handleTest() {
      const data = [];// 表格数据定义
      // 表头
      const tableHeaderList = [
        ["项目标题合并单元格", ""],
        ["姓名", "年龄"]
      ];
      tableHeaderList.map((tableHeaderItem) => {
        data.push(tableHeaderItem);
      });
      // 表格数据
      const tableDataList = [
        ["张三", 25],
        ["李四", 35]
      ];
      tableDataList.map((tableDataItem) => {
        data.push(tableDataItem);
      });
      // 将数据转成XLSX需要的格式
      const ws = XLSX.utils.aoa_to_sheet(data);
      // 合并单元格
      // merges合并单元格: s开始，e结束, c是列,r是行[A1相当于0列]
      // cols列宽度
      const merges = [
        { "s": { "c": 0, "r": 0 }, "e": { "c": 1, "r": 0 }, }
      ], cols = [
        {wch: 20}, //第一列
        {wch: 8} //第一列
      ];
      ws["!merges"] = merges;
      ws["!cols"] = cols;
      // 设置样式(暂时无效)
      var styleBase = {
        font: {
            name: '宋体',
            sz: 10,
            color: {
                rgb: '00104E8B'
            }
          },
          border: { // 设置边框
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' }
          },
          alignment: { horizontal: "center", vertical: "center", wrap_text: true },
          fill: { bgcolor: { rgb: 'ffff00' } }
        };
      // 给所有单元格赋值样式(样式暂时无效)
      Object.keys(ws).map((wsItem) => {
        if(["!ref", "!merges", "!cols"].includes(wsItem)) {
          return true;
        }
        ws[wsItem].s = styleBase;
      });
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
      function s2ab(s) {
        if (typeof ArrayBuffer !== 'undefined') {
            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;
        } else {
            var buf = new Array(s.length);
            for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
      };
      // 下载XLSX文件
      saveAs(new Blob([
        s2ab(
            // 这里的数据是用来定义导出的格式类型
            XLSX.write(wb, {
                bookType: 'xlsx',
                bookSST: false,
                type: 'binary'
            })
        )
      ], {
          type: ""
      }),
      "xlsx导出测试文件.xlsx");
    },
  }
};
</script>