纯前端导出excel插件pikaz-excel-js使用小结

最近项目有多个报表开发并前端导出为excel的需求，第一张报表用的是pikaz-excel-js插件，git地址为https://github.com/pikaz-18/pikaz-excel-js，网上文档虽然多，但很多都很基础，官方文档介绍也很简单，没有很详细深入，好在导出的excel看着还原度很高。下面我会一步一步介绍开发细节：

1、首先使用npm（npm i -S pikaz-excel-js）或yarn（yarn add pikaz-excel-js）将依赖安装到项目代码里；

2、在想要导出excel的vue文件里import {excelExport} from 'pikaz-excel-js'引入导出函数；

3、拼接需要导出的excel模板，同时赋值。我们可以创建一个空数组，从上到下一行一行地往该数组push行对象，对象里面是从左到右按顺序排列的列名（会在excelExport函数的keys定义，整个excel有多少列就定义多少个）；

4、最后用excelExport函数导出excel，上一步拼接的模板还需要进行单元格合并才能更贴合需求，可以在excelExport函数中sheet里面的merges字段配置，"1-1:8-1"代表将第一列第一行至第八列第一行进行合并，"5-45:5-46"代表将第五列第四十五行至第五列第四十六行进行合并，而拼接的模板数组则传到table字段。colWidth可以设置每一列的宽度，单位是%，globalStyle可以设置全局样式，cellStyle可以设置具体单元格样式，cell字段对应的是单元格编号，"A1"代表第一列第一行的单元格，"H28"代表第八列第二十八行的单元格。

整个拼接过程就是堆人力，技术难度不大。但个人建议还是后端拼接模板并导出，修改更容易，还原度也更高。