vue中el-table的导出

最新推荐文章于 2025-02-13 12:12:36 发布

原创最新推荐文章于 2025-02-13 12:12:36 发布 · 705 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中利用file-saver和xlsx库将表格数据导出为Excel文件。首先安装相关插件，然后在页面中引入并设置表格ID。在导出Excel的函数中，通过XLSX.utils.table_to_book获取表格内容，使用XLSX.write转换为xlsx格式，并使用file-saver保存到本地。整个过程涉及前端数据处理和文件下载功能。

先安装插件npm install --save xlsx file-saver
在对应vue的页面中导入

import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'

给表格设置id，id="electricTable"

exportExcel: function(fileName) {
  // #electricTable为表格的id
  const wb = XLSX.utils.table_to_book(document.querySelector('#electricTable'))
  const wt = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    saveAs(
      new Blob([wt], { type: 'application/octet-stream' }),
      fileName + '.xlsx'
    )
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wt)
  }
},