vue快捷导出excel插件

原创

已于 2022-05-26 21:46:13 修改 · 6.8k 阅读

于 2022-04-25 15:50:11 首次发布

本文介绍了如何在Vue项目中使用pikaz-excel-js插件来实现Excel导出功能，包括安装配置、属性设置、多级表头和合并单元格的处理，以及在实际应用中的代码示例和注意事项。

最开始我使用的是知名度高的xlsx插件，但发现他的免费版没办法修改样式，而配合使用xlsx-style又有许多的问题，需要修改源码，使身为小菜鸟的我十分的难受o(╥﹏╥)o

机缘巧合下找到了pikaz-excel-js这款在xlsx和xlsx-style基础上对其进行了封装的插件，使用起来十分的友好，很快就完成了功能

npm i -S pikaz-excel-js

参数	说明	类型	可选值	默认值
bookType	文件格式	string	xlsx/xls	xlsx
filename	文件名称	string	--	excel
manual	手动导出模式，设置为true时，取消点击导出，并可调用pikaExportExcel方法完成导出	boolean	true/false	false
sheet	表格数据，每个表格数据对象配置具体看下方表格配置	array	--	--
before-start	处理数据之前的钩子，参数为导出的文件格式，文件名，表格数据，若返回 false则停止导出	function(bookType, filename, sheet)	--	--
before-export	导出文件之前的钩子，参数为导出的文件格式，文件名，blob文件流，若返回 false则停止导出	function(bookType, filename, sheet)	--	--
on-error	导出失败的钩子，参数为错误信息	function(err)	--	--

参数	说明	类型	可选值	默认值
title	表格标题，自动设置合并，非必须项	string	--	--
tHeader	表头，非必须项	array	--	--
multiHeader	多级表头,即一个数组中包含多个表头数组，非必须项	array	--	--
table	表格数据	array	--	--
merges	合并单元格，合并的表头和表格多余数据项以空字符串填充，非必须项	array	--	--
keys	数据键名，需与表头内容顺序对应	array	--	--
colWidth	列宽，若不传，则列宽自适应，数据量多时推荐设置列宽	array	--	--
sheetName	表格名称	string	--	sheet
globalStyle	表格全局样式，具体参数查看下方表格全局样式	object	--