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

本文链接：https://blog.csdn.net/qq_53519425/article/details/127492384

本文介绍如何在Vue项目中使用Element UI实现纯前端导出Excel。首先需要安装file-saver和xlsx依赖，并引入script-loader。解决require报错问题可能需要修改Export2Excel源文件并封装。在Vue组件中，导入封装后的文件，设置excel的头部信息，调用导出函数即可。文章提供了一篇详细教程链接，帮助开发者进行前端Excel导出。

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

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

1.安装依赖

npm install -S file-saver xlsx
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前台导出

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

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