XLSX实现导出带样式的Excel表格的坑

项目的要求，需要导出一个结果到Excel表格中，因为所以，没有用Java的方式去实现，而选择了Vue前端直接导出的方式来实现。

开头总结：
使用xlsx-style的XLSX对象来生成Excel的对象才能实现样式，需要区分开xlsx包的XLSX对象

导入XLSX

网上有很多资料，基本上就是使用XLSX去实现Excel表格的创建

cnpm install --save xlsx

在导入XLSX后，如果要实现带样式的Excel表格，还需要再导入xlsx-style

cnpm install --save xlsx-style

注意：
导入xlsx-style时，在引用入vue后，启动时会抛出异常

import XLSX from "xlsx-style"
报错：This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

需要手动导入JS，在node-modules中找到xlsx-style中的dist目录中的xlsx.full.min.js粘贴到static里

然后再在index.html中导入这个js

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

或者修改源码：

在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 
var cpt = require(’./cpt’ + ‘able’); 
改成 
var cpt = cptable;

xlsx-style的使用

使用上诉方式导入后，若想实现在sheet参数中的添加的样式，例如：

sheet['B2'].s = {
        font: {
          name: '宋体',
          sz: 18,
          color: {rgb: 'ff0000'},
          bold: true,
          italic: false,
          underline: false
        },
        alignment: {
          horizontal: 'center',
          vertical: 'center'
        }
      }

只需要在将sheet对象转换为Excel对象的Blob格式时，使用XLSX --xlsx-style包中 进行转换即可，使用xlsx包中的只能生成无样式的excel！

/**
  * 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
  */
    sheet2blob: function (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) // 这里的XLSX是上面手动导入的JS中的，是xlsx-style的XLSX
      var blob = new Blob([this.s2ab(wbout)], {type: 'application/octet-stream'})
      return blob
    },
    // 字符串转ArrayBuffer
    s2ab: function (wbout) {
      var buf = new ArrayBuffer(wbout.length)
      var view = new Uint8Array(buf)
      for (var i = 0; i !== wbout.length; ++i) view[i] = wbout.charCodeAt(i) & 0xFF
      return buf
    }

需要注意的是：XLSX这个参数，就是xlsx-style所属了！
如果还需要使用XLSX包中的一些函数，例如aoaToSheet等，那么导入的XLSX包不能引入为

import XLSX from "XLSX"

这样会导致上面手动在index.html中导入的xlsx-style冲突失效！！！

import XLSXD from "XLSX"

var sheet = XLSXD.utils.aoa_to_sheet(aoa)