vue快捷导出excel插件

最开始我使用的是知名度高的xlsx插件，但发现他的免费版没办法修改样式，而配合使用xlsx-style又有许多的问题，需要修改源码，使身为小菜鸟的我十分的难受o(╥﹏╥)o

机缘巧合下找到了pikaz-excel-js这款在xlsx和xlsx-style基础上对其进行了封装的插件，使用起来十分的友好，很快就完成了功能

目录

安装与配置介绍

项目地址：

/pikaz-18/pikaz-excel-js.git

属性

表格参数配置

表格全局样式

单元格样式

Methods:

官方案列

我的导出功能最终的效果

我的代码

代码的一些说明

多级表头

合并单元格

表格的数据与数据键名

全局属性

最后一步

安装与配置介绍

项目地址：

/pikaz-18/pikaz-excel-js.git

pikaz-excel-js - npm

npmi-Spikaz-excel-js

属性

表格参数配置

表格全局样式

单元格样式

其他属性与表格全局样式设置方式一致

Methods:

官方案列

更多demo请前往github项目中，可以参照demo和文档配置

<excel-export:sheet="sheet"><div>导出</div></excel-export>import { ExcelExport } from 'pikaz-excel-js'export default {components: {ExcelExport},data() {return {sheet: [{title:"水果的味道",tHeader:["荔枝","柠檬"],table:[{litchi:"甜",lemon:"酸"}],keys:["litchi","lemon"],sheetName:"水果的味道",}]}}}

我的导出功能最终的效果

我的代码

<template><excel-export :sheet="sheet" style="float: right" :filename="filename":manual="true"ref="excelExport"><el-tooltip content="导出当前页表格内容" placement="bottom-start"><!-- 导出按钮 --><el-button type="primary" icon="el-icon-upload" @click="getData">导出</el-button></el-tooltip></excel-export></template><script>import { ExcelExport } from "pikaz-excel-js";export default {name: "vDerive",components: {ExcelExport,},props: {deriveData: { type: Array, required: true, default: () => [] },deriveColumns: { type: Array, required: true, default: () => [] },filename: String,},data() {return {sheet: [], //表格数据};},methods: {getData() {let title = "历史数据"; //表格标题let sheetName = "历史数据"; //表格名称let headerele = [];let headercol = [];this.headerOperate(this.deriveColumns, headerele, headercol);//多级表头let multiHeader = [headerele, headercol]; multiHeader[0].splice(multiHeader[0].indexOf("告警状态"), 0, "");multiHeader[0].splice(multiHeader[0].indexOf("操作"), 1);multiHeader[0].push("","")//合并边框消失：在最后空白的单元格加上空格字符multiHeader[1].unshift("", "");//表格数据let table = this.deriveData.map((item) => {const {name,equipment,time,state,urgent,major,common}=itemreturn {name,equipment,time,state,urgent,major,common};});//数据键名let keys = Object.keys(table[0]);//合并单元格let merges = ["A2:A3", "B2:B3", "C2:D2", "E2:F2:G2"];//表格全局样式let globalStyle = {border: {top: {style: "thin",color: { rgb: (64,158,255)},},right: {style: "thin",color: { rgb: (64,158,255) },},bottom: {style: "thin",color: { rgb: (64,158,255) },},left: {style: "thin",color: { rgb: (64,158,255) },},},font: {color: {rgb: (64,158,255)},},};this.sheet.push({title,sheetName,multiHeader,table,keys,merges,globalStyle,});this.$refs.excelExport.pikaExportExcel(); //此处是因为开启了手动导出，所以要自己调用这个方法，好处是后续方便添加防抖节流什么的},//这个方法是递归把我的嵌套数据分成多级表头所需要的的两个数组headerOperate(data, headerele = [], headercol = []) {data.forEach((ele) => {if (ele.columns && ele.columns.length) {this.headerOperate(ele.columns, headercol);}headerele.push(ele.label);});},}};</script>

代码的一些说明

我是把这个导出功能给封装成了一个数组，由外部传递数据进来，我的数据也有些麻烦，嵌套的有点深，所以花了很多代码去处理。

如果你的数据没有嵌套这么深也无需多级表头的话，可以看这篇文章，只需一会便可完成功能

Vue+pikaz-excel-js实现导出功能/weixin_49141728/article/details/120016671

多级表头

multiHeader:[[第一行],[第二行]...以此类推],

我的功能是由两行组成的多级表头，所以需要两个数组，我是通过定义一个递归方法来处理的，最后赋给multiHeader

this.headerOperate(this.deriveColumns, headerele, headercol);

let multiHeader = [headerele, headercol];

headerOperate(data, headerele = [], headercol = []) {data.forEach((ele) => {if (ele.columns && ele.columns.length) {this.headerOperate(ele.columns, headercol);}headerele.push(ele.label);});},

需要注意的是多级表头要配合合并单元格使用，不然位置会不对的

合并单元格

多列合并 A1:B1:...以此类推

多行合并 A1:A2...以此类推

先实现导出excel功能，再看具体该怎么合并，简单来说就是数格子

let merges = ["A2:A3", "B2:B3", "C2:D2", "E2:F2:G2"];

还有就是单元格合并还要添加空字符串

multiHeader[0].splice(multiHeader[0].indexOf("告警状态"), 0, "");multiHeader[0].splice(multiHeader[0].indexOf("操作"), 1);multiHeader[0].push("","")//合并边框消失：在最后空白的单元格加上空格字符multiHeader[1].unshift("", "");

可以理解为占位子，把数据给挤到一边去，不然的话“被合并”的单元格中的数据会消失的。

最后如何是靠边的单元格合并的话，会导致他的边框消失，这时也要给他后面添加空字符，具体添加几个，看合并的个数。

表格的数据与数据键名

let table = this.deriveData.map((item) => {let exportData = {};exportData.name = item.name;exportData.equipment = item.equipment;exportData.time = item.time;exportData.state = item.state;exportData.urgent = item.urgent;exportData.major = item.major;mon = mon;return exportData;});let keys = Object.keys(table[0]);

一行即是一个对象，遍历赋下值再添加一下就OK了。

keys就像是elementUI中form表单的prop，注意对应即可，我这里是直接获取了数组中第一个对象的所有建名，因为每一行数据对象的键名其实都是一样的嘛。

全局属性

let globalStyle = {border: {top: {style: "thin",color: { rgb: (64,158,255)},},right: {style: "thin",color: { rgb: (64,158,255) },},bottom: {style: "thin",color: { rgb: (64,158,255) },},left: {style: "thin",color: { rgb: (64,158,255) },},},font: {color: {rgb: (64,158,255)},},};

这个就不做说明了，就换了下文字与边框的颜色

最后一步

this.sheet.push({title,sheetName,multiHeader,table,keys,merges,globalStyle,});},

自此就大功告成了，当然千万别忘记了传递

:sheet="sheet"

我的项目目前没有excel导入的需求，以后有机会再分享