Vue element ui组件库 table 表格导出excel表格

高申航

已于 2022-10-28 15:55:06 修改

阅读量572

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： elementui 前端 javascript vue

于 2022-10-25 21:47:50 首次发布

本文链接：https://blog.csdn.net/qq_46058838/article/details/127522319

笔记专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了使用Vue和ElementUI实现表格数据导出的方法。首先安装依赖，接着引入依赖，可在页面或全局引入；然后给<el-table>添加id，在methods中加入exportExcel()，最后在导出按钮添加点击事件即可完成导出。

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

先上成品图合适了你再往下看

数据不方便展示，你懂就行

第一步安装依赖

//第一个依赖
npm install --save xlsx

//第二个依赖
npm install file-saver

第二步引入依赖

在需要导出的页面引入依赖，或者引入全局

我是在页面引入的

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

第三步在代码内给 <el-table>加一个id

后边还是你写的别的东西，你只需要加一个id

 <el-table 
     id="out-table"
       ...
>

第四步在methods加入exportExcel（）里边

  methods: {
    // 导出表单
    exportExcel () {
      /* generate workbook object from table */
     var xlsxParam = { raw: true };
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-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' }), 'Person List.xlsx')  //这个是你导出表单的名字Person List 这是我的，你自己随意
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    },


}

第五步在你的导出按钮里添加单机事件

   <el-button @click="exportExcel"></el-button>

这样就ok了，简单吧，也没那么复杂对吧

Vue element ui组件库 table 表格导出excel表格

先上成品图 合适了你再往下看

第一步 安装依赖

第二步 引入依赖