从此无心爱良夜,任他明月下西楼

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]
      }))
    }

 

posted @ 2022-07-05 16:49  明月下  阅读(681)  评论(0编辑  收藏  举报

页脚