(转)vue 利用js触发vue-json-excel的下载操作,解决多次下载等问题

转载地址：https://www.jianshu.com/p/4d716bec3a26

 

需求：列表中的每行数据都有一个导出按钮，且点击导出会发起网络请求,获取激活码列表数据。

分析：我使用的vue-json-excel插件，该插件要导出的数据源是放到插件的data属性中，所以我们要先获取到激活码列表数据后，再触发该插件。直接触发的话会导致下载列表中的所有行数据等稀奇古怪的问题。

解决办法:导出按钮和vue-json-excel分离，前者实现发起网络请求,获取激活码列表数据，待获取到激活码列表数据后，再执行后者，实现下载操作。

 

做法：(核心代码)

html:

<div
  :key="index"
  class="export_btn"
  :style="{ color: exportDisabled == true ? '#f2f2f2' : '#15a0f9' }"
  @click="exportClick(record.batch)"
>
导出
</div>
<download-excel
  style="z-index:-2;position:absolute;"
  id="download_excel"
  :data="allList"
  :fields="allFields"
  name="激活码列表.xlsx"
>
<a-button type="primary" class="income_detail">
  导出数据
</a-button>
</download-excel>

js：

 exportClick(batch) {
      this.allList = [];// 清空之前的数据
      this.request3Func(batch);// 网络请求
},
 request3Func(batch) {
    // 省略部分代码
    // 在网络请求的成功回调中写上如下代码(这里一定要等一等再触发点击下载事件，因为VUE的数据模型绑定有时间延迟)
   setTimeout(function() {
          document.getElementById("download_excel").click();
    }, 100);
}