Vue导出json数据到Excel及大量导出数据的应用

安装

一、安装依赖（根目录下）

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

二、下载两个所需要的js文件Blob.js和 Export2Excel.js。
GitHub下载地址：Blob.js&Export2Excel.js

三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

四、添加webpack.base.conf.js配置

alias: {
	  'vendor': path.resolve(__dirname, '../src/vendor'),
    }

template:
<button @click="export2Excel">导出</button>

methods:{
    formatJson(filterVal, jsonData) {
    　　　　return jsonData.map(v => filterVal.map(j => v[j]))
    　　},
    export2Excel() {
    　　　　require.ensure([], () => {
    　　　　　　const { export_json_to_excel } = require('../../../vendor/Export2Excel');//引入文件　
    　　　　　　const tHeader = ['商品名称','商品货号','售价','库存','销量','分享',];//导出字段名
    　　　　　　const filterVal = ['name', 'number', 'salePrice', 'stocknums', 'salesnums', 'sharenums', ];
    　　　　　　const list = this.goodsItems;//将数据赋值给list
    　　　　　　const data = this.formatJson(filterVal, list);
    　　　　　　export_json_to_excel(tHeader, data, '自定义导出文件名');
    　　　　})
    　 }
}

五、可能的出错

1. npm run build出错提示：module not found ‘…/…/Export2Excel.js’。个人路径不同，根据情况修改methods引入文件的路径。确认没有拼写及大小写错误。
2. npm run build出错提示：module not found ‘src/vendor/Blob’。同样是引入路径问题，修改Export2Excel.js：
   将require('script-loader!src/vendor/Blob');修改为require('script-loader!./Blob');

应用

功能实现：导出大量数据，并显示导出进度条
效果如下图:

<template>
  <diV>
    <Modal
        v-model="isExport"
        title="导出设置">
        //进度条设计
      <div style="width: 520px;position: relative;top: -21px;left: -16px;font-size: 10px" v-show="isProgress">
        <Progress :percent="export_percentage" :stroke-color="['#108ee9', '#87d068']" text-inside :stroke-width="15" status="active" />
      </div>
       ......//导出筛选项
      <div slot="footer">
        <Button type="primary" @click="isExport = false">取消</Button>
        <Button type="primary" @click="exportData()" :disabled="isLoadingExport">确定</Button>
      </div>
    </Modal>
  </div>
</template>

//分次请求，拼接数据，避免超时。（超时可根据报错信息，重新设置超时时间）
 async exportData() {
     this.isLoadingExport = true;  //加锁，禁止在导出阶段二次触发导出按钮
     this.isProgress = true;//控制进度条的显示和隐藏
     let result_total = await this.exportReload();//获取导出数据条数 。exportReload（）将根据筛选条件进行计算，返回int类型值
     let request_times=Math.ceil(result_total/100); //计算分几次请求
     let complete_count=0; //记录成功请求次数
     this.export_percentage=0; //设置当前进度百分比为0
     let exportData = [];
     for (let i = 0; i < request_times; i++) {
       let data = {
         ......//导出筛选项
         size: 100,
         current: i+1,
       };
       apiGetData(data).then(res => {
         if (200 != res.code) {
           this.$Message.error(res.msg);
         } else {
           for (let i = 0; i < res.user.data.length; i++) { //将后台返回中需要的字段取出
             exportData.push(res.user.data[i])
           }
           complete_count++;
           this.export_percentage=Math.ceil(100*complete_count/request_times); //设置当前进度百分比
           // console.log(this.export_percentage);
           if(complete_count==request_times){
             // this.isLoadingExport = false;
             this.exportExcel(exportData);//导出
             this.isLoadingExport = false;//最好是等导出完毕再执行
           }
         }
       });
     }
   },
 async exportExcel(exportData) {
     require.ensure([], () => {
     const {export_json_to_excel} = require('../../vendor/Export2Excel');　　//引入文件　　　　　　
     const tHeader = ['所属项目', '工作日期', '提交人员', '提交日期', '备注']; //将对应的属性名转换成中文
     const filterVal = ['projectName', 'time', 'subUserName', 'insert_time', 'remarks'];//table表格中对应的属性名　
     const data = this.formatJson(filterVal, exportData);
     export_json_to_excel(tHeader, data, '导出文件名');
   })
 },
 exportReload() {
        if (this.loading) return;
        this.loading = true;
        let data = {
          ......//导出筛选项
          size: 100, //大小不重要，获取的total不变
          current: 1,
        };
        let p = new Promise(function (resolve,
        ) {
          apiGetData(data).then(res => {
            if (200 != res.code) {
              this.$Message.error(res.msg);
            } else {
              resolve(res.user.total);
            }
          });
        });
        this.loading = false;
        return p
      },
 formatJson(filterVal, jsonData) {
   return jsonData.map(v => filterVal.map(j => v[j]))
 },