导出自定义样式的Excel文件

准备工作

这里因为sheetJs带样式的导出是需要付费的，那么这里就只能使用excelJs来做带样式的导出了

ExcelJs官网

引入项目

excelJs主要多用于node服务端。这里我是Vue的单页面项目，要使用浏览器版本。那么可以如下方式引入
1、直接cdn引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/1.10.0/exceljs.min.js"></script>

2、本地引入
在static文件夹中保存该js文件。

继而在index.html中引入

<script src=<%= htmlWebpackPlugin.options.path %>/exceljs/exceljs.min.js></script>

建立导出模板

插件公用文件中：

  /**
     * 大批量导出excel数据文件
     */
    Vue.prototype.$ExportKey = {
      TestExprot: {
        title: "采购跟踪报表数据Excel模版",
        sheetName: "采购跟踪报表",
        header: [{
          label: "名称",
          key: "name",
          width: 50,
          style: {
            font: {
              size: 9
            }
          }
        }, {
          label: "编码",
          key: "code",
          width: 50,
          style: {
            font: {
              size: 9
            }
          }
        }]
      }
    }

核心导出逻辑

导出文件核心代码

   /**
     * 导出大数据文件
     * data:后端返回的数据
     * sheet:表示需要渲染的模板
     */
    Vue.prototype.$ExportByMoreData = function (data, sheet) {
      var workbook = new ExcelJS.Workbook();
      var worksheet = workbook.addWorksheet(sheet.sheetName);
      worksheet.columns = sheet.header; //添加表头
      let titleList = [];
      let headers = [];
      sheet.header.forEach((item) => {
        titleList.push(sheet.title);
        headers.push(item.label)
      })
      worksheet.getRow(1).values = titleList //表标题
      worksheet.getRow(2).values = headers //表头
      worksheet.views = [{ //设置滚动固定表头
        state: 'frozen',
        xSplit: 0,//设置最左边固定列数，0表示不固定
        ySplit: 2,//设置头部固定行数，2表示固定表头和表标题
        activeCell: 'A1'
      }];
      worksheet.getCell('A1').font = { //设置标题字体粗体
        bold: true
      };
      worksheet.getCell('A1').alignment = { //设置标题居中
        vertical: 'middle',
        horizontal: 'center'
      };
      worksheet.addRows(data);
      let mergeCellsEnd = String.fromCharCode(65 + (sheet.header.length - 1)) //获取结尾列
      worksheet.mergeCells(`A1:${mergeCellsEnd}1`) //合并单元格
      sheet.header.forEach((item,index) => {
        let Cell= String.fromCharCode(65 + index)
        worksheet.getCell(`${Cell}2`).fill = {//设置表头背景色
          type: 'pattern',
          pattern:'darkVertical',
          fgColor:{argb:'FEFB00'},//这里前景色设置和背景色一直，否则会有默认的黑色。
          bgColor:{argb:'FEFB00'}//背景色
        };
        worksheet.getCell(`${Cell}2`).font = {
          size: 11//设置表头字体大小
        };
      })
      let blob = ""
      workbook.xlsx.writeBuffer().then((data) => {
        blob = new Blob([data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        });
        saveAs(blob, `${sheet.title}.xlsx`);
      });
    }

使用

直接在需要导出的地方调用

//其中data是后端返回的数据集
//this.$ExportKey.TestExprot是需要渲染的模板
this.$ExportByMoreData(data,this.$ExportKey.TestExprot)

效果：

滚动固定表头：

更多功能的使用请前往ExcelJs