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

这篇具有很好参考价值的文章主要介绍了vue element-ui表格（el-table）数据导出execl文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

功能实现：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.页面引用

页面代码如下：文章来源地址https://www.toymoban.com/news/detail-627652.html

<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");
      }
    }
 }