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.页面引用

页面代码如下：

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

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