Vue导出excel表格设置样式的解决方案

一、前期准备

npm install xlsx-style将插件导入项目

注意：直接使用npm install xlsx-style可能会报错，因为这个东西很久没有维护了报错解决方案的话网上有很多可以找一下，因为今天我们用的是她的升级版，无需解决报错
改进后的xlsx-style发布到npm上啦！安装命令npm install xlsx-style-medalsoft（感谢大佬 一杠(封装组件的大佬)）
大家要看封装过程可以查看https://juejin.cn/post/6903820868859002888#heading-7

二、导出excel以及样式修改

 let wb = XLSX.utils.book_new();
    //导出输出表头设置
      let headers = {
        acceptCode: "验收单编号",
        acceptName: "验收单名称",
        acceptType: "验收类型",
        supplierName: "供应商名称",
        acceptTargetCode: "合同编码",
        acceptTargetName: "合同名称",
        contractType: "合同类型",
      };
      // 将表头放入数据源前面
      this.contractTableData.unshift(headers);
      let contentWs = XLSX.utils.json_to_sheet(this.contractTableData, {
      //表头对应字段设置
        header: [
          "acceptCode",
          "acceptName",
          "acceptType",
          "supplierName",
          "acceptTargetCode",
          "acceptTargetName",
          "contractType",
        ], //可自定义表头顺序
        skipHeader: true, // 是否忽略表头,默认为false
        origin: "A2",//表头起始行，默认从'A1'开始，也就是Excel左上角第一个表格
      });
      // 单独设置某个单元格内容
      contentWs["A1"] = {
        t: "s",
        v: "人员名单",//单元格文字
        // 自定义样式
        s: {
          font: {
            name: "宋体",
            sz: 40,
            bold: true,
            color: { rgb: "FFFFAA00" },
          },
          //设置更多样式可参考下图
          alignment: {
            horizontal: "center",
            vertical: "center",
          },
          fill: { bgcolor: { rgb: "ffff00" } },
        },
      };
      // // 设置单元格合并 !merges 为一个对象数组,每个对象设定了单元格合并的规则,
      // {s:{ r: 0, c: 0}, e: { r: 0, c: 2}} 为一个规则, s: 起始位置, e: 结束位置, r: 行, c: 列
      contentWs["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 7 } }];
      XLSX.utils.book_append_sheet(wb, contentWs, "Sheet1");
      let wbout = XLSXS.write(wb, {
        type: "buffer",
      });
      // // 下载
      FileSaver.saveAs(
        new Blob([wbout]),
        //   // 设置导出文件名称
        "XXXX人员表" + ".xlsx"
      );

样式参考图
单元格样式
设置单元格的样式，就是设置工作表对象中的单元格对象的 s 属性。这个属性的值也是一个对象，它有五个属性：fill、font、numFmt、alignment和border。

三、拓展

针对导出表格自定义样式等基本用法上面应该够用了，如果有更复杂更丰富的需求，可以参考https://zhuanlan.zhihu.com/p/257845606 文章作者：慕课网