Vue——el-table导出excel

最新推荐文章于 2025-07-07 16:38:22 发布

tellmewsm

最新推荐文章于 2025-07-07 16:38:22 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： xlsx

本文链接：https://blog.csdn.net/wx19900503/article/details/101780535

Vue.js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何解决Element UI框架中el-table组件导出数据至Excel时出现的数据重复问题。通过删除fixed列数据，配合xlsx和file-saver库，实现正确导出。文章提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element使用时遇到一个问题：el-table导出到excel的时候数据重复了，删除el-table的fixed数据可以解决

fixed

列是否固定在左侧或者右侧，true 表示固定在左侧

string, boolean

true, left, right

—

1、安装依赖：

npm install --save xlsx

npm install --save file-saver

vue-script中引用：

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

2、添加导出按钮

<div>
      <el-form
        :inline="true"
        class="demo-form-inline">
        <el-form-item>
          <el-button
            type="success"
            @click="exportExcel()">导出EXCEL</el-button>
        </el-form-item>
      </el-form>
    </div>

3、对应方法：battery 是el-table标签的id ，保存到Battery.xlsx

   exportExcel() {
      var wb = XLSX.utils.table_to_book(document.querySelector('#battery'))

      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'Battery.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }

      return wbout
    }

参考：

https://blog.csdn.net/zhongguohaoshaonian/article/details/81507866