前端导出excel表格修改样式

前端导出excel表格修改样式

原用法（缺点：不能修改样式） => 使用xlsx导出

改进方法 => 使用 xlsx-js-style

// 安装依赖
npm install xlsx-js-style -S

	// 引入依赖
	import FileSaver from "file-saver";
	import XLSX from "xlsx-js-style";

    // 前端导出表格为Excel
    handleExport() {
      var wb = XLSX.utils.table_to_book(
        document.querySelector(".exportTable"),
        { raw: true }
      );
      this.setExlStyle(wb.Sheets["Sheet1"]);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "表格名称.xlsx"
        );
      } catch (e) {}
      return wbout;
    },
    // 导出表格样式设置
    setExlStyle(data) {
      data["!cols"] = [{ wpx: 50 }]; // 设置列宽
      for(var column = 1; column < 5; column ++){
      	data["!cols"].push({ wpx: 120, });
      }
      for (let key in data) {
        if (data[key] instanceof Object) {
          data[key].s = {
            font: { // 字体设置
              bold: true,
              italic: false,
              underline: false,
            },
            alignment: {
              horizontal: "center", // 水平居中
              vertical: "center", // 垂直居中
              wrapText: false, // 自动换行
            },
            // border 边框属性
            border: {
              // top: { style: 'thin' },
              // bottom: { style: 'thin' },
              // left: { style: 'thin' },
              // right: { style: 'thin' }
            },
            // fill 颜色填充属性
            fill: {
              // fgColor: { rgb: '87CEEB' },
            }
          };
        }
      }
      this.$nextTick(() => { // 指定单元格设置样式
        for (var i = 1; i < 5; i++) {
          data["F" + i].s.font.color = { rgb: "409EFF" };
          data["H" + i].s.font.color = { rgb: "F56C6C" };
          data["I" + i].s.font.color = { rgb: "67C23A" };
          data["J" + i].s.font.color = { rgb: "67C23A" };
        }
      });
      return data;
    },