VUE导出表格数据

最新推荐文章于 2024-05-12 18:40:07 发布

iiiilooaixuud

最新推荐文章于 2024-05-12 18:40:07 发布

阅读量819

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46617584/article/details/126174962

版权

vue 专栏收录该内容

91 篇文章 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

三、在vue的methods方法中

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

<Button type="primary" icon="el-icon-download" @click="exp" style="margin-left:20px">导出</Button>

// 此方法是下载数据到表格
    exp() {
      // 这里为请求axios并获得数据
         EquipmentGetAll()
            .then(res => {
            if (res.data.state) {
            this.exportList = res.data.data ? res.data.data : []
          //请求成功后把要打印的数据赋值一下并调用export2Excel方法
          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 = ["equipmentID", "equipmentNum", "equipmentName","equipmentModel"];
        //这里对数据进行遍历操作，修改数据的值
        this.exportList.forEach((item, index, arr) => {
          item.equipmentModel
            ? (arr[index].equipmentModel = "AB")
            : (arr[index].equipmentModel = "CD");
        });
        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]));
    }

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

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