vue项目中导出excel表格数据

最新推荐文章于 2024-07-28 22:48:50 发布

匆匆过客罢了

最新推荐文章于 2024-07-28 22:48:50 发布

阅读量734

点赞数

分类专栏：小功能文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_42498458/article/details/121359488

版权

小功能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于vue项目中导出excel表格数据，我又又又忘记了。。。感觉还是有必要记一下。

一、需要安装三个依赖：

npm install -S file-saver xlsx
npm install -D script-loader

二、项目中新建文件夹（文件名excel）

里面放置两个文件Blob.js和 Export2Excel.js。

链接：https://pan.baidu.com/s/1dZCFNNHkJPLwUX0GpoiT8Q 
提取码：1234

复制这段内容后打开百度网盘手机App，操作更方便哦

三、在vue的methods方法中

页面添加导出按钮，加入方法：

<el-button type="primary" icon="el-icon-download" @click="exp">导出</el-button>

我这里用的是element ui框架，其实都差不多的。

    exp() {
      const params = this.srhfrm;
      // 这里为请求axios并获得数据
      getMajorSetupList(params)
        .then(res => {
          //请求成功后把要打印的数据赋值一下并调用export2Excel方法
          this.exportList = res.data;
          this.export2Excel();
        })
        .catch(err => {
          console.log(err);
        });
    },
    export2Excel() {
      require.ensure([], () => {
        //这里引入刚才下载的Export2Excel.js包
        const { export_json_to_excel } = require("../../../excel/Export2Excel");
        //这里是excel表格头部字段
        const tHeader = ["专业id", "专业名称", "是否启用"];
        //这里是相对应头部字段的数据字段
        const filterVal = ["id", "name", "status"];
        //这里对数据进行遍历操作，修改数据的值
        this.exportList.forEach((item, index, arr) => {
          item.status
            ? (arr[index].status = "启用")
            : (arr[index].status = "禁言");
        });
        const list = this.exportList;
        //数据处理
        const data = this.formatJson(filterVal, list);
        //打印
        export_json_to_excel(tHeader, data, "专业数据");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }

四、假如项目有很多个导出，每个都写就太麻烦了

一般情况下，都会封装一个工具类：