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

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

相关推荐
敲敲了个代码5 小时前
从硬编码到 Schema 推断:前端表单开发的工程化转型
前端·javascript·vue.js·学习·面试·职场和发展·前端框架
张雨zy7 小时前
Pinia 与 TypeScript 完美搭配:Vue 应用状态管理新选择
vue.js·ubuntu·typescript
dly_blog7 小时前
Vue 响应式陷阱与解决方案(第19节)
前端·javascript·vue.js
消失的旧时光-19437 小时前
401 自动刷新 Token 的完整架构设计(Dio 实战版)
开发语言·前端·javascript
console.log('npc')7 小时前
Table,vue3在父组件调用子组件columns列的方法展示弹窗文件预览效果
前端·javascript·vue.js
用户47949283569157 小时前
React Hooks 的“天条”:为啥绝对不能写在 if 语句里?
前端·react.js
我命由我123458 小时前
SVG - SVG 引入(SVG 概述、SVG 基本使用、SVG 使用 CSS、SVG 使用 JavaScript、SVG 实例实操)
开发语言·前端·javascript·css·学习·ecmascript·学习方法
用户47949283569158 小时前
给客户做私有化部署,我是如何优雅搞定 NPM 依赖管理的?
前端·后端·程序员
C_心欲无痕8 小时前
vue3 - markRaw标记为非响应式对象
前端·javascript·vue.js
qingyun9899 小时前
深度优先遍历:JavaScript递归查找树形数据结构中的节点标签
前端·javascript·数据结构