vue导出功能可视化的方法

思路

• 前端调用接口分批获得需要导出的数据
• 将数据合并，生成excel表格并下载，导出功能实现

用到的依赖库

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

用到的文件(百度网盘自取)

Export2Excel.js 点击下载 提取码：e18n

Blob.js 点击下载 提取码：bsxd

部分源码

<template>
  <div>
    <el-button @click="exports">导出</el-button>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="percentNum"></el-progress>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        exportDialogFlag:false,//导出弹窗开关
        percentNum:0,//进度条百分比
        exportData:[],//需要导出的数据
      }
    },
    methods: {
      exports(){
        let cyclic; //循环次数
        let cyclicNum = 100; // 每次导出的条数
        cyclic = Math.ceil(this.total / cyclicNum);
        for (let i = 0; i < cyclic; i++) {
          /* 接口获取到导出的数据 */
          // let res = await equipmentExports_api({pageNum: i + 1,pageSize: cyclicNum,ids});
          // if (res.data.code == 200) {
          //   for (var j in res.data.rows) {
          //     this.exportData.push(res.data.rows[j]);
          //   }
            this.percentNums = Number((((i + 1) / cyclic) * 100).toFixed(2)); //进度条的百分比
            if (this.percentNums >= 100) {
              this.percentNums = 100;
            }
          // }
        }
        /* 生成表格并下载 */
        if (this.exportData) {
          require.ensure([], () => {
            const {export_json_to_excel} = require("../../../../public/js/Export2Excel");//引入生成excel的方法
            const tHeader = ["departmentName","companyName","deviceName","deviceIp","createDate"];//定义表头
            const filterVal = tHeader;//将字段与表头进行匹配
            let list = this.exportData;
            const data = this.formatJson(filterVal, list);//数据的处理
            export_json_to_excel(tHeader, data, "device");//生成表格并下载
          });
        }
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
    },
  }
</script>