Excel导出的Export2Excel函数未报错但是页面卡住。(typeError)
使用vue-element-admin的Excel导出功能时,用到了Export2Excel函数。(详情见文档)
但是在使用时遇到了意外bug,页面在使用这个功能时,没有报错,但是也没有效果且进程卡死了。
再次查看示例之后发现是传入参数的格式不对。
excel.export_json_to_excel({ header: tHeader, // 表头 必填 data, // 具体数据 必填 filename: this.formInline.filename, // 非必填 autoWidth: true, // 非必填 bookType: this.formInline.bookType // 非必填 })
这里的data格式不是对象组成的数组。而是二维数组。用另一个函数提前进行一个转换。
formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { return v[j] })) } const tHeader = Object.keys(this.tableList?.[0]) // 获取表头 const list = this.tableList // 对象组成的数组 const data = this.formatJson(tHeader, list) // 导出函数接收的数组
转换完毕的data就可以传入使用了。另外由于Export2Excel过大,且使用较少,尽量在使用时临时引入。
完整代码如下
// 导出函数 exportExcel() { this.downloadLoading = true import('@/vendor/Export2Excel').then(excel => { const tHeader = Object.keys(this.multipleSelection?.[0]) const list = this.multipleSelection const data = this.formatJson(tHeader, list) // console.log(data) excel.export_json_to_excel({ header: tHeader, // 表头 必填 data, // 具体数据 必填 filename: this.formInline.filename, // 非必填 autoWidth: true, // 非必填 bookType: this.formInline.bookType // 非必填 }) this.downloadLoading = false }) }, // 转换一下json格式 formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { return v[j] })) }