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

1、引入

import FileSaverfrom'file-saver'importXLSX2from'xlsx'importXLSXfrom"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.js807行； 
将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'].$ellet $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-stylefor(const keyin 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'}elseif(text.length>4&&  text.search("出差")!=-1|| text.search("早退")!=-1||
          text.search("迟到")!=-1){
          console.log(text)
          colors='ff7032'}elseif(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=newBlob([s2ab(wbout)],{
      type:"application/octet-stream"});// 字符串转ArrayBufferfunctions2ab(s){var buf=newArrayBuffer(s.length);var view=newUint8Array(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'&& urlinstanceofBlob){
      url=URL.createObjectURL(url);// 创建blob地址}var aLink= document.createElement('a');
    aLink.href= url;
    aLink.download= saveName||'';// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效var event;if(window.MouseEvent) event=newMouseEvent('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);},