前端导出并导出样式

页面导入插件

 具体代码：

// 将我们生成好的excel转换成blob，供xlsx-populate使用
workbook2blob(workbook) {
  // 生成excel的配置项
  const wopts = {
    // 要生成的文件类型
    bookType: "xlsx",
    // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    bookSST: false,
    type: "binary"
  };
  const wbout = XLSX.write(workbook, wopts);

  // 将字符串转ArrayBuffer
  function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }

  const blob = new Blob([s2ab(wbout)], {
    type: "application/octet-stream"
  });
  return blob;
},

// 使用xlsx生成一个简单的excel
handleExport() {
  // 假设这是接口返回的数据
  const data = [
    { '2019-09': "0", '2019-10': "0", '2019-11': "0", '2019-12': "0", '2020-01': "0", '2020-02': "0", '2020-03': "0", '2020-04': "0", '2020-05': "0", '2020-06': "0", '2020-07': "0", '2020-08': "0", '2020-09': "0", '2020-10': "0", '2020-11': "0", '2020-12': "0", '2021-01': "0", '2021-02': "0", '2021-03': "0", '2021-04': "0", '2021-05': "0", '2021-06': "0", '2021-07': "0", '2021-08': "0", '2021-09': "3155905.14", '2021-10': "0", '2021-11': "0", '2021-12': "0", '2022-01': "0", '2022-02': "0", '2022-03': "3208212.96", '2022-04': "0", '2022-05': "0", '2022-06': "0", '2022-07': "47212.50", '2022-08': "49275.00", '2022-09': "205741.30", 'buildingName': "A座", 'total': "6666346.90"},
  ];
  // const title = [{A: "数据统计"}, {}];
  const table = [{'buildingName': "楼栋", '2019-09': "2019-09",  '2019-10': "2019-10", '2019-11': "2019-11", '2019-12': "2019-12", '2020-01': "2020-01", '2020-02': "2020-02", '2020-03': "2020-03", '2020-04': "2020-04", '2020-05': "2020-05", '2020-06': "2020-06", '2020-07': "2020-07", '2020-08': "2020-08",
  '2020-09': "2020-09",
  '2020-10': "2020-10",
  '2020-11': "2020-11",
  '2020-12': "2020-12",
  '2021-01': "2021-01",
 '2021-02': "2021-02",
  '2021-03': "2021-03",
  '2021-04': "2021-04",
  '2021-05': "2021-05",
  '2021-06': "2021-06",
  '2021-07': "2021-07",
  '2021-08': "2021-08",
  '2021-09': "2021-09",
  '2021-10': "2021-10",
  '2021-11': "2021-11",
  '2021-12': "2021-12",
  '2022-01': "2022-01",
  '2022-02': "2022-02",
  '2022-03': "2022-03",
  '2022-04': "2022-04",
  '2022-05': "2022-05",
  '2022-06': "2022-06",
  '2022-07': "2022-07",
  '2022-08': "2022-08",
  '2022-09': "2022-09",
  'total': "总计",}];
  // data.forEach((item) => {
  //   table.push({
  //     A: item.date,
  //     B: item.count,
  //     C: item.type
  //   });
  // });
  const finalData = [...table, ...data];
  console.log(finalData, 'finalData')
  const wb = XLSX.utils.book_new();
  const sheet = XLSX.utils.json_to_sheet(finalData, {
    skipHeader: true
  });
  XLSX.utils.book_append_sheet(wb, sheet, "数据统计详情");

  const workbookBlob = this.workbook2blob(wb);
  // 需要添加样式的行列信息
  const dataInfo = {
    // titleCell: "A2",
    // titleRange: "A1:B2",
    theadRange: `A1:ZZZ1`,
    // tbodyRange: `A4:B${data.length + 3}`,
    // tableRange: `A3:B${data.length + 3}`
  };
  // 准备加样式
  return this.addStyle(workbookBlob, dataInfo);
},

// 根据传入的样式行列信息加样式
addStyle(workbookBlob, dataInfo) {
  return XlsxPopulate.fromDataAsync(workbookBlob).then((workbook) => {
    // 循环所有的表
    workbook.sheets().forEach((sheet) => {
      // 所有cell垂直居中,修改字体
      // sheet.usedRange().style({
      //   fontFamily: "Arial",
      //   verticalAlignment: "center"
      // });
      // 去除所有边框
      // sheet.gridLinesVisible(false);
      // 统计表格数据
      // title加粗合并及居中
      // const title = sheet.cell(dataInfo.titleCell).value();
      // sheet
      //   .range(dataInfo.titleRange)
      //   .merged(true)
      //   .style({
      //     bold: true,
      //     horizontalAlignment: "center",
      //     verticalAlignment: "center"
      //   });
      // 表头加粗及背景色
      sheet.range(dataInfo.theadRange).style({
        bold: true,
        horizontalAlignment: "center",
      });
      // 表格内容右对齐
      // sheet.range(dataInfo.tbodyRange).style({
      //   horizontalAlignment: "right"
      // });
      // 表格黑色细边框
      // sheet.range(dataInfo.tableRange).style({
      //   border: {
      //     style: "thin",
      //     color: "000000",
      //     direction: "both"
      //   }
      // });
    });
    return workbook.outputAsync().then(
      (workbookBlob) => URL.createObjectURL(workbookBlob)
    );
  });
},

// 最后处理点击时的逻辑
createDownLoadData() {
  this.handleExport().then((url) => {
    const downloadAnchorNode = document.createElement("a");
    downloadAnchorNode.setAttribute("href", url);
    downloadAnchorNode.setAttribute("download", "xxx数据汇总.xlsx");
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  });
},