XLSX实现导出带样式的Excel表格的坑
XLSX导出带样式的Excel表格失败导入XLSXxlsx-style的使用项目的要求,需要导出一个结果到Excel表格中,因为所以,没有用Java的方式去实现,而选择了Vue前端直接导出的方式来实现。开头总结:使用xlsx-style的XLSX对象来生成Excel的对象才能实现样式,需要区分开xlsx包的XLSX对象导入XLSX网上有很多资料,基本上就是使用XLSX去实现Excel表格的创建cn
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)
更多推荐
所有评论(0)