vue导出Excel文件（入门篇）

清晨的第一抹阳光a

于 2020-09-29 19:11:00 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

文章标签： excel vue javascript npm xml

本文链接：https://blog.csdn.net/qq_39354297/article/details/108878847

本文介绍了如何在前端项目中实现Excel导出功能。通过在src目录下引入Blob.js和Export2Excel.js，然后使用npm安装相关组件file-saver和xlsx。在JavaScript中，将文件挂载到全局，并在需要导出Excel的地方调用export_json_to_excel方法，结合formatJson处理数据，最终通过按钮触发导出操作。

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

1、在src目录下创建一个目录vendor，放入Blob.js和Export2Excel.js

2、安装相关组件npm install -S file-saver 用来生成文件的web应用程序npm install -S xlsx 电子表格格式的解析器npm install -D script-loader 将js挂在在全局下

3、修改js文件中地址

4、使用

　　在相关组件中引入(好像不引入也可以，之前已经挂在全局)

import Blob from "@/vendor/Blob";
import Export2Excel from "@/vendor/Export2Excel.js";

    //导出Excel
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        //头
        const tHeader = ["编号", "姓名", "时间"];
        //对应的标签
        const filterVal = ["id", "name", "date"];
        //标签对应的内容  是一个数组结构
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "销售报表");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
    //导出结束

　　按钮触发该方法：

<el-button type="warning" @click="export2Excel">
    <i class="el-icon-upload2"></i>&nbsp;导出Excel
</el-button>