vue element-ui表格（el-table）数据导出execl文件

最新推荐文章于 2025-05-16 14:02:26 发布

原创最新推荐文章于 2025-05-16 14:02:26 发布 · 3.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用ElementUI的el-table组件结合xlsx和file-saver插件实现出表格数据导出为Excel文件的功能。文章提供了完整的代码示例，包括导出工具文件的创建和页面引用方法。

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

前言

功能实现：element UI 的el-table数据导出为execl文件
使用到插件：xlsx、file-saver

一、插件安装

npm install --save xlsx file-saver

二、使用示例

1.创建导出execl工具文件

exportExecl.js 代码如下：


import FileSaver from 'file-saver'
const XLSX = require('xlsx')

/**
 * el-table数据导出execl文件
 * 
 * @param {*} id:el-table元素id
 * @param {*} fileName :导出文件名称
 * @returns 
 */
function exportExecl(id,fileName){
    let excelName = fileName||'导出表格.xlsx';
      var xlsxParam = { raw: true };
      let tables=document.getElementById(id);
       if(!tables) return
        tables = document.getElementById(id).cloneNode(true);
      // 移除固定列，防止重复生成表格 
      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }
      let table_book = XLSX.utils.table_to_book(tables,xlsxParam);
      var table_write = XLSX.write(table_book, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
      });
      try {
          FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }),
              excelName
          );
      } catch (e) {
             console.log(e, table_write);
      }
      return table_write;

}
export default exportExecl

2.页面引用

页面代码如下：

<el-table id="table"></el-table>
<el-button @click="handleExport">导出</el-button>

 import exportExecl from "@/utils/exportExecl.js";
 export default {
    methods:{
    //导出
      handleExport(){
           exportExecl("table", "模板.xlsx");
      }
    }
 }