vue导出Excel——elementUI表格导出功能

举报
Laura_张 发表于 2022/08/28 00:56:31 2022/08/28
【摘要】 文章目录 步骤一:安装依赖步骤二:引入组件步骤三:给table设置一个id步骤四:写methods 步骤一:安装依赖 npm install --save xlsx file-sa...


步骤一:安装依赖

npm install --save xlsx file-saver

步骤二:引入组件

在放置需要导出功能的组件中引入相关组件

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

步骤三:给table设置一个id

HTML中的设置,简单说就是给需要导出的Excel的table标签el-table加一个Id,比如说exportTable,对应下面的exportExcel方法中的document.querySelector('#exportTable')

步骤四:写methods

在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' }), 'fileName.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

注意:

● 在表格中的数字为百分比或者是其他的,在导出的时候会进行处理变成小数,或者科学计数法,这个就需要集啊让xlsxParam这个字段,让导出不做格式转换,这样就能够你的table中是什么,导出就是什么。

● 可以导出表格的,但有个问题是导出的数据是重复的,这个是因为你的表格有列使用了fixed属性,element-ui的table使用了fixed属性固定列,导出表格时会出现导出两次的问题,是因为在table中有两个table标签,我们可以通过代码解决这个问题,注意代码中拷贝了一个table元素,否则直接删除会删除页面中的表格

优化代码:

exportExcel () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析,不进行格式转换
      var table = document.querySelector('#exportTab').cloneNode(true)
      table.removeChild(table.querySelector('.el-table__fixed')) //这里是双下划线
      var wb = XLSX.utils.table_to_book(table, 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' }), 'fileName.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

文章来源: blog.csdn.net,作者:张艳伟_Laura,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/Laura__zhang/article/details/121000076

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。