vue+elementUI前端表格excel文件下载

vue

1.安装依赖

npm install --save xlsx file-saver

2.引入

import FileSaver from \'file-saver\'

import XLSX from \'xlsx\'

3、HTML中的设置,简单来说就是给需要导出的table标签el-table上加一个id:如exportTab,对应下面的exportExcel方法中的 document.querySelector(\'#exportTab\') 

4、在methods中设置真正实现导出转换excel表格的方法,如下

exportExcel () {

/* generate workbook object from table */

var xlsxParam = { raw: true } // 导出的内容只做解析,不进行格式转换

var wb = XLSX.utils.table_to_book(document.querySelector(\'#exportTab\'), xlsxParam)

/* get binary string as output */

var wbout = XLSX.write(wb, { bookType: \'xlsx\', bookSST: true, type: \'array\' })

try {

FileSaver.saveAs(new Blob([wbout], { type: \'application/octet-stream\' }), \'审核情况表.xlsx\')

} catch (e) {

if (typeof console !== \'undefined\') {

console.log(e, wbout)

}

}

return wbout

}

可能还会遇到以下问题

(一)如果存在分页,导出时却只导出当前table绑定的数据,假如我们设置的table每页只有10条数据,导出时只导出了10条,并非所有符合条件的数据

  原因:此插件只导出当前table中所有的数据

  解决办法:在HTML代码中再加一个el-table标签,这个table专门用来导出数据,且此table一直隐藏着,当查询条件发生变化时,根据后台返回的所有符合条件的数据总量total值,然后重新设置获取后台数据方法的参数,拉取到所有符合条件的数据绑定进来,这样导出的就是想要的数据了。

(二)第一次导出时,导出的excel表格只有表头,没有数据内容

  解决方法:给导出到excel表格的函数exportExcel()设置一个延时执行即可,因为刚开始我没有设置延时执行,拉取到数据后直接赋值给了绑定到table上的exportData上,然后就立即调用exportExcel()导致,我猜测exportData渲染到table是需要一定时间的,这段时间内我们立即调用exportExcel()时,数据还没被渲染进去,此时exportExcel()拿不到数据,故此第一次导出的表格中没有数据

(三)导出的数据出现两份的情况

  原因:因为element ui下的el-table被渲染出来后有两个table标签,目的是方便进行数据交互使用,所以如果el-column存在fixed属性时,导出时会出现两份数据的情况

  解决方法:我是参照上面大佬的文章,直接将隐藏table中的el-table-column上的fixed属性去掉,毕竟这个table是隐藏起来的,直接去掉el-table-column上的fixed属性最便捷

(四)导出的excel表格,如果出现数字字符比较长的,在导出表格中会变成科学计数那样的情况

  解决方法:即上面exportExcel()方法中的前面第二和第三行,已经做了说明

var xlsxParam = { raw: true }; // 导出的内容只做解析,不进行格式转换

var wb = XLSX.utils.table_to_book(document.querySelector(\'#exportTab\'), xlsxParam);

以上是 vue+elementUI前端表格excel文件下载 的全部内容, 来源链接: utcz.com/z/377540.html

回到顶部