Vue+Element表格数据导出为Excel前端导出

借助插件实现表格数据导出为execl

安装插件

npm install --save xlsx file-saver

cnpm install --save xlsx file-saver

给表格添加id，导出的时候需要用到

     <!-- 表格 -->
     <el-table 
     id="out-table"
     :data="PowerList" border  
     style="width: 100%" 
     class="tableBox">
     
      </el-table>

使用的页面引入依赖

// 引入导出Excel表格依赖
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

点击导出按钮实现导出

 <!-- 导出按钮 -->
 <el-button type="primary" @click="exportExcel">导出</el-button>


// 导出表格  按钮点击后触发事件
const exportExcel = () => {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "idea.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }

导出封装

如果我们多页面使用导出每个页码引入使用导出代码，会非常的臃肿，所以我们需要进行封装

封装

在src新建hock文件夹里边新建export.js文件写入导出代码

// 引入导出Excel表格依赖 封装
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
const download = (name:string = "idea.xlsx", id:string = "#out-table")=>{ //name表示导出的文件名  id表示表格定义的id 可传可不传
    var wb = XLSX.utils.table_to_book(document.querySelector(id));
    /* 获取二进制字符串作为输出 */
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
    });
    try {
        FileSaver.saveAs(
        //Blob 对象表示一个不可变、原始数据的类文件对象。
        //Blob 表示的不一定是JavaScript原生格式的数据。
        //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
        //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
        new Blob([wbout], { type: "application/octet-stream" }),
        //设置导出文件名称
        name
        );
    } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
    }
    return wbout;
}
export {
    download
}

使用

需要在页面使用的时候引入，点击的时候调用 

注意：使用时必须为表格绑定id

import { download } from '@/hook/export' //引入封装的导出函数


//点击导出
const downloadexport = () => {
    // 调用封装的导出传入名字
    download("LTV.xlsx")  //可接受两个参数第一个为导出的文件名，第二个为table绑定的id
}