首页 > 其他分享 >(转)vue 利用js触发vue-json-excel的下载操作,解决多次下载等问题

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

时间:2023-02-18 17:56:58浏览次数:37  
标签:插件 vue 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);
}

 

 

标签:插件,vue,excel,导出,列表,下载
From: https://www.cnblogs.com/lxhbky/p/17133188.html

相关文章