前端项目 导出Excel，合并单元格并设置颜色

1、安装

npm install xlsx-style file-saver xlsx -D

2.本地src目录新建文件夹，放Export2Excel.js和 Blob.js

• Export2Excel.js
• Blob.js

3、页面使用

exportToExcel() {
    require.ensure([], () => {
        const { export_json_to_excel } = require('@/utils/Export2Excel'); // 引入文件
        const tHeader = ['姓名', '角色', '角色ID', '机构', '机构ID']; // 对应表头
        const filterVal = ['name', 'roleName', 'roleId', 'orgName', 'orgId']; // table表格中对应的属性名
        const list = this.tableData; // 数据JSON
        const data = this.formatJson(filterVal, list);
        console.log('------', data)
        export_json_to_excel(tHeader, data, '商品列表excel');
    })
},
formatJson: function(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
}

4、复杂类型

如：合并单元格，修改 Export2Excel.js 文件中 export_json_to_excel 方法

export function export_json_to_excel(th, jsonData, len, classification, defaultTitle) {
  // th 表头栏目设置
  // jsonData 表格数据 每一行对应的数据

  /* original data */
  var data = jsonData;
  data.unshift(th);
  let arr  = ['', '分组一', '', '分组二', ''] // 可自行按格式加入数据
  data.unshift(arr);
  var ws_name = "SheetJS";

  var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;
  var dataInfo = wb.Sheets[wb.SheetNames[0]];
  
  // 设置A3-A9的单元格合并,索引从0开始算
  ws['!merges'] = [
      // s：开始start
      // e：结束end
      // r：行row
      // c: 列columns
      {s: {r: 0, c: 1}, e: {r: 0, c: 2}}, // 第一行，第二列到第三列合并
      {s: {r: 0, c: 3}, e: {r: 0, c: 4}}, // 第一行，第三列到第四列合并
  ]

  var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
  var title = defaultTitle || '列表'
  saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

5、修改表格数据样式

注释 Export2Excel.js 第三行

require('script-loader!file-saver');
require('./Blob');
// require('script-loader!xlsx/dist/xlsx.core.min');

需要引入import XLSX from "xlsx-style"， 但是xlsx-style有问题；

• 解决：在node-modules中找到xlsx-style中的dist目录中的xlsx.full.min.js粘贴到static里，在index.html引入，具体代码如下

<script src="/static/xlsx.full.min.js"></script>

如：修改表格字体颜色，修改 Export2Excel.js 文件中 export_json_to_excel 方法

export function export_json_to_excel(th, jsonData, len, classification, defaultTitle) {
  var data = jsonData;
  data.unshift(th);
  var ws_name = "SheetJS";

  var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;
  var dataInfo = wb.Sheets[wb.SheetNames[0]];

  // 设置表格数据样式
  let style = {
      alignment: {
          horizontal: "center",
          vertical: "center"
      },
      font: {
          name: '宋体',
          sz: 18,
          color: {rgb: "f50606"},
          bold: true,
          italic: false,
          underline: false
      }
  }
  dataInfo["B1"].s = style // 将Excel中对应B1框中的数据赋值样式
  dataInfo["D1"].s = style // 将Excel中对应D1框中的数据赋值样式
  
  var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
  var title = defaultTitle || '列表'
  saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

完成！

方法二

通过后台方法调用，后台给返回文件流的形式

==重点是要加 responseType: 'blob'==

axios({
    baseUrl: API.baseUrl,
    url: API.download,
    method: 'POST',
    params: JSON.stringify(parameterData),
    responseType: 'blob'
}, (res) => {
    let resData = res.data
    let url = window.URL.createObjectURL(resData) // 创建下载链接
    let a = document.createElement('a')
    document.body.appendChild(a)
    a.href = url
    a.download = seqNo + '.xls'
    a.click()
    document.body.removeChild(a) // 下载完成移除元素
    window.URL.revokeObjectURL(url) // 释放blob对象
}, (err) => {
    console.log('-----2', err);
})