西安网站建设网站建设,网站优化与seo的区别,花都区建设工程造价管理网站,sketch可以做网站交互么目录
前言#xff1a;
技术选型#xff1a;
主要功能点#xff1a;
核心代码#xff1a;
完整代码#xff1a;
开发文档 前言#xff1a;
在前后端分离开发为主流的时代#xff0c;很多时候#xff0c;excel导出已不再由后端主导#xff0c;而是把导出的操作移…目录
前言
技术选型
主要功能点
核心代码
完整代码
开发文档 前言
在前后端分离开发为主流的时代很多时候excel导出已不再由后端主导而是把导出的操作移交到了前端。本文在全局导出组件封装上保持了高度的扩展性无论大家用的是element组件库还是antd vue的组件库或者其他的组件库都容易进行更换。
技术选型
vue antd vue sheetjs
前端导出excel导出需借助第三方插件目前两款导出最为主流。
一款是sheetjs优点支持多种excel格式但是官方文档全是英文SheetJS Community Edition | SheetJS Community Edition
一款是exceljs优点是中文文档很全缺点是导出格式受限仅支持部分格式
https://github.com/exceljs/exceljs/blob/master/README_zh.md
因公司业务需要用户需支持多种excel的格式所以本文笔者主要针对sheetjs进行封装调用。
主要功能点
自定义dom拆分成多张表导出默认超过1万条数据自动拆分自定义过滤函数各种标题自定义数据排序支持大数据量导出
核心代码
// 文件名称
const filename fileName;
//Excel第一个sheet的名称
const ws_name sheetName;
// 创建sheet
const ws XLSX.utils.aoa_to_sheet([this.tableTitle]);
//添加数据
XLSX.utils.sheet_add_json(ws, apiData, {skipHeader: true,origin:origin
});
// 创建wokbook
const wb XLSX.utils.book_new();
// 将数据添加到工作薄
XLSX.utils.book_append_sheet(wb, ws, ws_name);
// 导出文件
XLSX.writeFile(wb, filename);
完整代码
安装sheetjs
npm i xlsx
全局导出组件代码
ExportExcelComponent.vue
templatediv idexcel-exportslot namecustom v-ifisCustom/slota-button ghost typeprimary clickstartExport v-else导出excel/a-buttona-modalv-ifvisiblev-modelvisible:titlemodelTitle:maskClosablefalse:closablefalsetemplate #footera-buttontypeprimaryghostv-ifisAbnormal:loadingbtnLoadingclickstartExport重新导出/a-buttona-buttontypeprimaryghostv-ifisAbnormal:loadingbtnLoadingclickgetTableData继续导出/a-buttona-button :loadingbtnLoading clickhandleClose 关闭 /a-button/templatea-progress:percentpercent:statusprogressStatusclassprogress//a-modal/div
/template
script
import * as XLSX from xlsx;export default {props: {//自定义过滤函数filterFunction: {type: Function,default: null,},//sheet名ws_name: {type: String,default: Sheet,},//导出的excel的表名filename: {type: String,default: Excel new Date().getTime(),},//拆分成每个表多少条数据需要搭配isSplit属性一起使用multiFileSize: {type: Number,default: 10e3,},//模态框标题modelTitle: {type: String,default: 导出excel,},//是否自定义dom,如果采用插槽需要开启该属性否则dom为默认buttonisCustom: {type: Boolean,default: false,},// 导出的数据表的表头tableTitleData: {type: Array,required: true,default: () [],},//请求数据的api函数asyncDataApi: {type: Function,default: () {},},//请求参数listQuery: {type: Object,default: () ({}),},},data() {return {ws: null,isAbnormal: false,btnLoading: false,progressStatus: active,visible: false,percent: 0,tableData: [],currentPage: 1,multiFileNum: 0,};},computed: {// 导出的数据表的表头tableTitle() {return this.tableTitleData.map((item) {return item.title;});},//导出数据表的表头的codetableCode() {return this.tableTitleData.map((item) {return item.code;});},},watch: {percent: {handler(newVal) {if (newVal 100) {this.progressStatus success;setTimeout(() {this.handleClose();}, 500);}},},},methods: {//按照指定的title顺序映射排序数组对象sortData(data, tit_code) {const newData [];data.forEach((item) {const newObj {};tit_code.forEach((v) {newObj[v] item[v] || ;});newData.push(newObj);});return newData;},handleClose() {console.log(close);this.resetExport();this.visible false;},resetExport() {this.percent 0;this.progressStatus active;this.isAbnormal false;this.tableData [];this.currentPage 1;this.multiFileNum 0;this.ws XLSX.utils.aoa_to_sheet([this.tableTitle]);},//获取进度条百分比getPersent(res) {const persent_num ((res.paginator.currentPage * res.paginator.size) /res.paginator.total) *100;this.percent parseInt(persent_num) - 1;},//异常处理handleAbnormal() {this.btnLoading false;this.progressStatus exception;this.isAbnormal true;},async startExport() {if (!this.asyncDataApi) {return new Promise(new Error(asyncDataApi is required));}this.resetExport();await this.getTableData();},//请求导出的数据和标题async getTableData() {this.visible true;this.btnLoading true;this.isAbnormal false;try {const res await this.asyncDataApi({...this.listQuery,page: this.currentPage,});if (res.code ! 200) {this.handleAbnormal();this.$message.error(res.message || this.t(requestException));return;}let apiData res.data;apiData this.sortData(apiData, this.tableCode);if (this.filterFunction) {apiData this.filterFunction(apiData);}apiData apiData.map((item) Object.values(item));this.addSheetData(apiData, res);this.currentPage res.paginator.currentPage 1;console.log(res, res);this.getPersent(res);const isSplit res.paginator.currentPage * res.paginator.size this.multiFileSize * (this.multiFileNum 1);if (isSplit) {this.splitExport();}if (res.paginator.currentPage res.paginator.page) {this.getTableData();return;}//当数据不满足拆分数量时触发this.hadnleOneExport(res);this.percent 2;this.btnLoading false;this.$message.success(导出成功);} catch (error) {console.log(error);this.$message.error(网络错误请稍后再试);this.handleAbnormal();}},//当数据不满足拆分数量时触发hadnleOneExport(res) {if (this.multiFileNum res.paginator.total this.multiFileNum * this.multiFileSize) {this.multiFileNum 1;this.exportExcel(this.filename this.multiFileNum .xlsx,this.ws_name this.multiFileNum);} else if (!this.multiFileNum) {this.exportExcel(this.filename .xlsx, this.ws_name);}},//拆分成多个excel导出splitExport() {this.multiFileNum 1;this.exportExcel(this.filename this.multiFileNum .xlsx,this.ws_name this.multiFileNum);//重置表格this.ws XLSX.utils.aoa_to_sheet([this.tableTitle]);},addSheetData(apiData, res) {//添加数据到表格 origin为每次添加数据从第几行开始XLSX.utils.sheet_add_json(this.ws, apiData, {skipHeader: true,origin:(this.currentPage - 1) * res.paginator.size -this.multiFileSize * this.multiFileNum 1,});},//导出所有数据到一个excelexportExcel(fileName, sheetName) {// 文件名称const filename fileName;//Excel第一个sheet的名称const ws_name sheetName;// 创建wokbookconst wb XLSX.utils.book_new();// 将数据添加到工作薄XLSX.utils.book_append_sheet(wb, this.ws, ws_name);// 导出文件XLSX.writeFile(wb, filename);},},
};
/script调用示例
App.vue
templatedivh1测试表格导出/h1divExportExcelComponent:tableTitleDatatitle:asyncDataApiasyncDataApi:isCustomisCustom:listQuerylistQueryrefexport:filterFunctionhandleDateFiltertemplate #custom!-- a-button typeprimary clickhandleClick导出excel/a-button --a-dropdown-buttonDropdowna-menu slotoverlay clickhandleMenuClicka-menu-item key1a-icon typeuser /1st menu item/a-menu-itema-menu-item key2a-icon typeuser /2nd menu item/a-menu-itema-menu-item key3a-icon typeuser /3rd item/a-menu-item/a-menu/a-dropdown-button/template/ExportExcelComponent/div/div
/template
script
import ExportExcelComponent from ./ExportExcelComponent/ExportExcelComponent.vue;
import { asyncDataApi } from ./request;
import dayjs from dayjs;
export default {data() {return {listQuery: {name: yyy,age: 18,},isCustom: true,asyncDataApi: null,title: [{ code: id, title: 序号 },{ code: hobby, title: 爱好 },{ code: name, title: 姓名 },{ code: age, title: 年龄 },// { code: hobby, title: 爱好 },{ code: sex, title: 性别 },{ code: address, title: 地址 },{ code: birthday, title: 生日 },{ code: createTime, title: 创建时间 },{ code: updateTime, title: 更新时间 },{ code: remark, title: 备注 },{ code: status, title: 状态 },],};},methods: {handleDateFilter(data) {const res data.reduce((pre, cur) {for (let i in cur) {if (i createTime) {cur[i] dayjs(cur[i] * 1000).format(YYYY-MM-DD HH:mm:ss);}}pre.push(cur);return pre;}, []);return res;},async handleMenuClick(val) {// const titleNewData [];// for (let i 1; i 500; i) {// this.title.forEach((item) {// titleNewData.push({ code: item.code i, title: item.title i });// });// }// this.title titleNewData;console.log(点击了导出excel, val);await (this.asyncDataApi asyncDataApi);this.$refs.export.startExport();},// async handleClick() {// console.log(点击了导出excel);// await (this.asyncDataApi asyncDataApi);// this.$refs.export.startExport();// },},components: {ExportExcelComponent,},
};
/script
mock数据:
request.js
const asyncDataApi (listquery) {console.log(params, listquery);// 模拟异步请求接口return new Promise((resolve, reject) {setTimeout(() {const data [];for (let i listquery.page * 100; i (listquery.page 1) * 100; i) {const obj {id: i - 99,name: 姓名 i,age: 20 i,hobby:赵客缦胡缨吴钩霜雪明。银鞍照白马飒沓如流星。十步杀一人千里不留行。事了拂衣去深藏身与名。闲过信陵饮脱剑膝前横。将炙啖朱亥持觞劝侯嬴。 i,sex: 男 i,birthday: 2020-01-01,createTime: 1701155392,updateTime: 2020-01-01,remark: 备注 i,status: 1 i,};// let newObj {};// for (var a 1; a 500; a) {// for (let k in obj) {// newObj[k a] obj[k];// }// }// data.push(newObj);data.push(obj);}resolve({data,code: 200,msg: 请求成功,paginator: {page: 1000,size: 100,total: 100000,currentPage: listquery.page,},});}, 100);});
};
export { asyncDataApi };开发文档
调用方式
如果不采用自定义dom的话直接点击默认的按钮可直接导出表格数据 如果采用自定义dom的话通过ref实例调用子组件内的startExport方法执行导出操作
templateExportExcelComponent...:isCustom true:asyncDataApiasyncDataApi:tableTitleDatatitlesrefexporta-button typeprimary clickhandleClick导出excel/a-button/ExportExcelComponent
/template
scriptimport { asyncDataApi } from /api/memberexport default{data(){return:{titles:[]asyncDataApi,}}methods:{handleClick(){this.$refs.export.startExport();}}}
/script
API
属性如下
参数说明类型默认值listQuery请求参数Object{}asyncDataApi请求数据的api函数Function必传tableTitleData导出的数据表的表头Array必传isCustom是否自定义dom,如果采用插槽需要开启该属性否则dom为默认button可以传递 v-slot:custom 来自定义 dom。BooleanfalsemodelTitle模态框标题String导出excel multiFileSize 拆分成每个表多少条数据需要搭配isSplit属性一起使用Number10e3filename导出的excel的表名StringExcel new Date().getTime()ws_namesheet名StringSheetfilterFunction自定义过滤函数可在业务层处理数据格式如时间格式化等Function(data)null
FAQ
filterFunction怎么使用
templateExportExcelComponent...:isCustom true:asyncDataApiasyncDataApi:tableTitleDatatitlesrefexport:filterFunctionhandleDateFiltera-button typeprimary clickhandleClick导出excel/a-button/ExportExcelComponent
/template
scriptimport { asyncDataApi } from /api/memberexport default{data(){return:{titles:[]asyncDataApi,}}methods:{handleDateFilter(data) {const res data.reduce((pre, cur) {for (let i in cur) {if (i createTime) {cur[i] dayjs(cur[i] * 1000).format(YYYY-MM-DD HH:mm:ss);}}pre.push(cur);return pre;}, []);return res;},handleClick(){this.$refs.export.startExport();}}}
/script
导出表格数据为空是什么情况
因为导出的表格数据的顺序和标题的顺序并不一定是一致的所以在组件内部做了映射排序一定要确保传入的标题数据在调用导出接口之前执行。如果传递的标题有误在进行映射的时候这时标题和表格数据并不匹配那么就会出现数据映射为空的情况
Promise ErrorasyncDataApi is required
当传递给组件的后端api需要在点击dom后赋值再传递的时候一定要确保在导入后端api之后再调用组件内的导出方法否则因为后端api还没传递过去就调用然后抛错或者导出异常
正确示例
async handleClick() {await (this.asyncDataApi asyncDataApi);this.$refs.export.getTableData();
},
后端导出表格api数据返回格式
因该组件为全局组件方便以后复用需与后端协商规定好数据导出的格式。以下为笔者的公司与后端同事协商的数据格式。大家可根据自己公司需要更改以上源码中后端返回值字段。
//后端返回数据结构
{status: true,data: [{...},{...},],paginator: {currentPage: 1,total: 200,size: 20,page: 10}
}
