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

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

相关推荐
deli0071 小时前
Redis 缓存穿透、击穿、雪崩:9 组流量实测数据库怎么被打穿
前端
江华森1 小时前
5Mbps 小水管也能扛:K3s 上 k6 压测 + HPA 弹性伸缩实测
前端
shuangyueliao1 小时前
103 个小游戏的商店素材,我一张图都没手动做:截图 / 封面 / 打包 / 提审全自动
前端
ZhengEnCi1 小时前
前端项目为什么需要一份统一的 theme.css:用 CSS 变量管住全局样式与主题切换
前端·css·前端工程化
wordbaby1 小时前
一次微信小程序 `web-view` 跳转原生页回跳后 H5 白屏的排查与修复(Hash 路由污染)
前端
用户721880438351 小时前
密码骰子:结合AIUI在眼镜上生成一串16位密码
前端
江华森2 小时前
全链路可观测落地记:kube-prometheus-stack 在 K3s 上的 8 个坑与一整套修复脚本
前端
deli0072 小时前
27 寸 4K 开 125% 为什么发虚?PPI 和缩放一次算清
前端
OpenTiny社区2 小时前
AI Agent场景组件库 TinyRobot v1.0 正式发布:一站式打造您的AI助手
vue.js·github
广州华水科技2 小时前
当大坝面临风险时,如何有效实施单北斗GNSS变形监测?
前端