vue+el-table组件+XLXS插件导出表格(纯前端)

问题:

    1.导出的数据被加工,数字过长会变成科学计数法,百分数会变成小数等

       原因:js-xlsx提供了自动加工功能,会识别数据格式,然后进行加工。

       解决办法:添加{ raw: true} 参数表示导出数据是未加工

      2.导出.xls格式的表格,超过256列,数据会丢失

          原因:.xls格式单个工作表最多支持65536行,256列

          解决办法:导出.xlsx格式的表格,.csv格式的也可以,但是.csv格式的表格存在没有单元格合并的问题             

js部分封装的导出代码,其他地方调用传入一个文件名即可

import * as XLSX from 'xlsx'
export default function exportXlsFile (name) {
  const table = document.createElement('table')
  table.appendChild(
    document.querySelector('.el-table__header thead').cloneNode(true)
  )
  table.appendChild(
    document.querySelector('.el-table__body tbody').cloneNode(true)
  )
  const book = XLSX.utils.book_new()
  // {raw: true}属性表示导出数据是未加工的,数字过长不会变成科学计数法,百分数不会变成小数等
  const sheet = XLSX.utils.table_to_sheet(table, { raw: true })
  XLSX.utils.book_append_sheet(book, sheet, 'sheet')
  // bookType:文件类型,可以是xlsx、xlsm、xlsb、xls,解决.xls格式时只能导出256列,超出的将会丢失
  XLSX.writeFile(book, `${name}.xlsx`, { bookType: 'xlsx' })
}

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值