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

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

相关推荐
岛泪2 分钟前
把 el-cascader 的 options 平铺为一维数组(只要叶子节点)
前端·javascript·vue.js
Kiyra1 小时前
阅读 Netty 源码关于 NioEventLoop 和 Channel 初始化部分的思考
运维·服务器·前端
冰暮流星1 小时前
javascript的switch语句介绍
java·前端·javascript
做科研的周师兄1 小时前
【MATLAB 实战】|多波段栅格数据提取部分波段均值——批量处理(NoData 修正 + 地理信息保真)_后附完整代码
前端·算法·机器学习·matlab·均值算法·分类·数据挖掘
da_vinci_x2 小时前
图标量产:从“手绘地狱”到“风格克隆”?Style Reference 的工业化实战
前端·游戏·ui·prompt·aigc·设计师·游戏美术
利刃大大2 小时前
【ES6】变量与常量 && 模板字符串 && 对象 && 解构赋值 && 箭头函数 && 数组 && 扩展运算符 && Promise/Await/Async
开发语言·前端·javascript·es6
天若有情6732 小时前
ES6 模块与 CommonJS 的区别详解
前端·javascript·es6
大猫会长2 小时前
postgreSQL中,RLS的using与with check
开发语言·前端·javascript
慧一居士2 小时前
vite.config.ts 配置使用说明,完整配置示例
前端
wusp19942 小时前
nuxt3模块化API架构
前端·javascript·nuxt3