Vue项目中导出当前el-table数据为Excel表格

最新推荐文章于 2024-04-09 16:11:31 发布

簸箕0606

最新推荐文章于 2024-04-09 16:11:31 发布

阅读量846

点赞数

文章标签： vue.js excel 前端

本文链接：https://blog.csdn.net/zjbkzj/article/details/131654197

版权

文章介绍了在Vue项目中如何将el-table组件的数据导出为Excel表格，主要涉及安装file-saver和xlsx库，然后在main.js中全局或局部引入，并使用XLSX.utils.table_to_book方法转换表格数据，结合FileSaver.saveAs保存文件。如果表格有fixed固定部分，需要在转换前处理fixed元素。

摘要由CSDN通过智能技术生成

Vue项目中导出当前el-table数据为Excel表格

安装依赖

npm i xlsx@0.14.1 file-saver@2.0.1 --save

进行配置

main.js 中全局引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
Vue.prototype.$FileSaver = FileSaver
Vue.prototype.$XLSX = XLSX

局部引入-- 哪里不会点哪里

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

使用方式

// 导出 --采用剧本引入的方式，看个人喜好了
    _export() {
      const fix = document.querySelector('.el-table__fixed')
      let wb
      if (fix) {
        // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        wb = XLSX.utils.table_to_book(
          document.querySelector('#table').removeChild(fix)
        )
        document.querySelector('#table').appendChild(fix)
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector('#table'))
      }
      const 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
    }