vue 中 element ui 导出excel （纯前端导出）

    在此之前请先配置element ui或者element plus在进行下面的操作。

1.安装依赖

1. npm install -S file-saver xlsx
2. npm install -D script-loader

下载所需的js 文件

    在这里我主要讲下require报错的问题，我在使用的时候，就遇到require报错的问题。所以从网络上搜索发现修改其中Export2Excel的源文件即可不报错。

//Export2Excel.js
/* eslint-disable */
require("script-loader!file-saver");
require("./Blob.js"); //转二进制用  这边要写你的blob的实际地址
require("script-loader!xlsx/dist/xlsx.core.min");

    如果你下载来的原文件本来就是这样就不需要修改了。这里最主要做了对这个文件的封装。

export function export2Excel(columns, list, name) {
  require.ensure([], () => {
    const { export_json_to_excel } = require("../excel/Export2Excel");
    let tHeader = [];
    let fileterVal = [];

    console.log(columns);
    if (!columns) {
      return;
    }
    columns.forEach((item) => {
      console.log("123456");
      tHeader.push(item.title);
      fileterVal.push(item.key);
    });
    const data = list.map((v) => fileterVal.map((j) => v[j]));
    export_json_to_excel(tHeader, data, name);
  });
}

1.你想要使用的话只需要导入这个文件

import { export2Excel } from "../../util/util";

2.在data中设置你的excel的头

      columns: [
        { title: "1", key: "officeRoom" },
        { title: "2", key: "cn" },
        { title: "3", key: "year" },
        { title: "4", key: "month" },
        { title: "5", key: "book" },
        { title: "6", key: "docCode" },
      ],

3.直接调用这个函数就好了

          export2Excel(this.columns, res.data.data, "凭证表数据");

具体的使用可以看看这篇文章

vue中 element-ui 如何导出excel表（前端导出）_造梦者FZ的博客-CSDN博客_elementui前台导出

我这边只是做一个稍稍的优化，希望能帮助到大家

      感谢看完的小伙伴，努力学习定会学有所成，相信自己最难不过坚持加油持续下去，明天的你会更好。你只管努力，剩下的交给时间。