vue+element导出excel,并修改样式

1、引入

import FileSaver from 'file-saver'
import XLSX2 from 'xlsx'
import XLSX from "xlsx-style";

2、报错

安装npm install –save xlsx-style会报错：
This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

解决 方法一：

可以直接修改源代码: 在\node_modules\xlsx-style\dist\cpexcel.js 807行； 
将var cpt = require(’./cpt’ + ‘able’); 
改成var cpt = cptable;

解决 方法二：

vue.config.js文件中修改：
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
sass: {
data: @import "~@/styles/variables.scss";
}
}
},
chainWebpack: config => {
//在 chainWebpack 添加下面的一段代码
config.externals({ “./cptable”: “var cptable” });**
},
devServer: {}
};

3、使用

setExport2Excel() {
const $e = this.$refs['listTable'].$el
let $table = $e.querySelector('.el-table__fixed')
if (!$table) {
$table = $e
}    
const wb = XLSX2.utils.table_to_sheet($table, {
      raw: true
    })
    console.log(wb)
    if (!wb['!merges']) {
      this.$message.warning('无法导出：报表无数据');
      return
    }
    for (var i = 0; i < 11; i++) {
      wb["!cols"][i] = {
        wpx: 130
      }
    }
    // 样式的文档地址
    // https://www.npmjs.com/package/xlsx-style
    for (const key in wb) {
      if (wb[key].v == 0 || key.indexOf('!') === -1 && wb[key].v) {
        let colors = '000000'
        let text = wb[key].v.toString()
        if (text.length > 4 && text.search("旷工") != -1) {
          console.log(text)
          colors = 'FF0000'
        } else if (text.length > 4 &&  text.search("出差") != -1 || text.search("早退") != -1 ||
          text.search("迟到") != -1) {
          console.log(text)
          colors = 'ff7032'
        } else if (text != '休息天数' && text != '外出(小时)' && text.search("外出") != -1 ||text.search("假") != -1 || text.search("休") != -1) {
          console.log(text)
          colors = '1460CB'
        }
        wb[key].s = {
          font: { //字体设置
            sz: 13,
            bold: false,
            color: {
              rgb: colors //十六进制，不带#
            }
          },
          alignment: { //文字居中
            horizontal: 'center',
            vertical: 'center',
            wrap_text: true
          },
          border: { // 设置边框
            top: {
              style: 'thin'
            },
            bottom: {
              style: 'thin'
            },
            left: {
              style: 'thin'
            },
            right: {
              style: 'thin'
            }
          }
        }

      }
    }
    console.log(wb['!merges'], wb)
    var data = this.addRangeBorder(wb['!merges'], wb) //合并项添加边框
    console.log(data)
    var filedata = this.sheet2blob(data)
    // console.log(filedata)
    this.openDownloadDialog(filedata, "-xxx报表.xlsx")
  },
  //为合并项添加边框
  addRangeBorder(range, ws) {
    let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
      "U", "V", "W", "X", "Y", "Z"
    ];
    if (range) {
      range.forEach(item => {
        let startColNumber = Number(item.s.r),
          endColNumber = Number(item.e.r);
        let startRowNumber = Number(item.s.c),
          endRowNumber = Number(item.e.c);
        const test = ws[arr[startRowNumber] + (startColNumber + 1)];
        for (let col = startColNumber; col <= endColNumber; col++) {
          for (let row = startRowNumber; row <= endRowNumber; row++) {
            ws[arr[row] + (col + 1)] = test;
          }
        }
      })
    }
    return ws;
  },
  //将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
  sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
      SheetNames: [sheetName],
      Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

    var wopts = {
      bookType: 'xlsx', // 要生成的文件类型
      bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
      type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {
      type: "application/octet-stream"
    }); // 字符串转ArrayBuffer
    function s2ab(s) {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
    return blob;
  },
  openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
      url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
      event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
  },