纯前端导出表格数据(vue+element-ui)

1,安装插件

npm install --save xlsx file-saver

2,在文件中使用

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

 3,out-table是表格的id

 outTab () {
       /* generate workbook object from table */
         let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },

 如果

使用el-table的fixed属性时,会导致生成2份数据
解决方法:

 /* generate workbook object from table */
let fix = document.querySelector('.el-table__fixed');
let wb;
if (fix) {
    wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));
    document.querySelector("#out-table").appendChild(fix);
} else {
    wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
}
/* get binary string as output */
let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
});

try {
  FileSaver.saveAs(new Blob([wbout], {
    type: 'application/octet-stream'
   }),  'file.xlsx');
} catch (e) {
  if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout;

需要注意的是:纯前端导出的话  会将百分比变成了小数  解决办法是 在获取表格的时候设置:

{ raw: true }

 const wb = XLSX.utils.table_to_book(document.querySelector('#table-ref'), { raw: true })

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值