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

XLSX导出带样式的Excel表格失败

导入XLSX
xlsx-style的使用

项目的要求，需要导出一个结果到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的XLSXvar blob = new Blob([this.s2ab(wbout)], {type: 'application/octet-stream'})return blob},// 字符串转ArrayBuffers2ab: 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) & 0xFFreturn 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)