将element ui el-table中的数据导出到excel中

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

原创

最新推荐文章于 2025-02-13 12:12:36 发布 · 1.4k 阅读

标签

#javascript #vue.js #html

本文介绍了如何在Vue.js项目中使用Element UI实现从el-table导出数据到Excel。通过引入第三方库，设置el-table的标识并编写特定的方法，实现了导出功能。但需要注意的是，如果存在分页，初始实现只能导出当前页面的数据。为解决这个问题，建议创建一个隐藏的el-table，用于存放所有符合条件的数据，当查询条件改变时，拉取全部数据并导出，确保导出内容完整。

好久没有写博客了，差一点给它忘啦！今天遇到一个小需求在后台管理中需要将搜索到的数据一键导出到excel中。需求虽然做出来，但是有一点点小问题。

首先

1. 下载第三方库：

npm install --save xlsx file-saver

2.在放置需要导出功能的组件中引入

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

3.需要给el-table指定一个标示，就设置一个id

4.在methods中写入以下代码

exportExcel() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        book: true,
        type: "array",

最低0.47元/天解锁文章