纯前端导出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"代表第八列第二十八行的单元格。

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

相关推荐
Cache技术分享1 分钟前
285. Java Stream API - 通过 Supplier 创建 Stream
前端·后端
阿基米东2 分钟前
从嵌入式到前端的探索之旅,分享 5 个开源 Web 小工具
前端·javascript·github
hxjhnct3 分钟前
响应式布局有哪些?
前端·html·css3
LYFlied5 分钟前
【每日算法】LeetCode215. 数组中的第K个最大元素
前端·算法
怎么就重名了5 分钟前
Kivy的KV语言总结
前端·javascript·html
jqq6665 分钟前
解析ElementPlus打包源码(四、打包主题)
前端·javascript·vue.js
代码猎人7 分钟前
类数组对象是什么,如何转化为数组
前端
duanyuehuan7 分钟前
js 解构赋值
开发语言·前端·javascript
进击的野人8 分钟前
Vue3 响应式系统深度解析:从原理到实践
前端·vue.js·前端框架
计算机程序设计小李同学8 分钟前
汽车4S店管理系统设计与实现
前端·spring boot·学习