vue项目导出excel ,文件过大导致请求超时的处理方法

一、因为文件过大,请求时间较长,就会产生请求超时的情况,处理方式是可以分为三个接口,接口1用来获取id值,接口2利用id值发起请求,询问是否准备好下载,如果没准备好,则没隔一秒再次发起请求询问是否准备好,直到准备好为止,清除定时器,使用接口3发起下载

function pollingFunctions(params) {
    let queryTimer;
    if (queryTimer) {
      clearInterval(queryTimer);
    }
    // 接口1-获取唯一标识code
    exportGetId(params).then((res) => {
      if (res.uuid) {
        // 接口2-查询是否完成
        queryTimer = setInterval(function () {
          exportAsk({ uuid: res.uuid }).then((result) => {
            if (result) {
              // 成功
              if (result.current == result.total) {
                clearInterval(queryTimer);
                function peCallback(pe) {
                  // 下载回调
                  defaultPercent.value = Math.round((pe.event.loaded / pe.event.total) * 100);
                  if (pe.event.loaded === pe.event.total) {
                    showProgress.value = false;
                    message.success({ content: '下载完成', key, duration: 3 });
                  }
                }
                try {
                  exportDownload({ uuid: res.uuid }, peCallback).then((res) => {
                    // 接口3
                    const fileName = '电子台账记录.xlsx';
                    let bold = new Blob([res.data]);
                    const newUrl = window.URL.createObjectURL(bold);
                    const link = document.createElement('a');
                    link.href = newUrl;
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();
                    link.parentNode?.removeChild(link);
                  });
                } catch (error) {
                  message.warn('下载失败,请重试');
                }
              }
            } else {
              // 失败
              clearInterval(queryTimer);
              message.warn('下载失败,请重试');
            }
          });
        }, 1000);
      }
    });
  }
// 导出1-获取查询id
export const exportGetId = (params?: Object) =>
  defHttp.get({ url: '', params });
// 导出2-利用查询id发起请求,询问是否可以下载,不可以就等一秒在发起请求询问是否准备好
export const exportAsk = (params?: Object) =>
  defHttp.get({ url: '', params });
// 导出3-准备好之后再发起下载请求
export const exportDownload = (params?: Object, peCallback?: Function) => {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: 'd',
      headers: {},
      responseType: 'blob',
      params,
      onDownloadProgress: (pe) => {
        peCallback ? peCallback(pe) : '';
      },
    })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        console.warn(err);
      });
  });
};

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中导出Excel文件方法可以通过使用Export2Excel.js这个库来实现。这个库暴露了两个接口:export_table_to_excel和export_json_to_excel。其中,我们常用export_json_to_excel接口,因为它更加可控一些。 首先,在src目录下创建一个excel文件夹,并在其中放入Blob.js和Export2Excel.js这两个文件(可以在文章底部获取)。 然后,在Vue组件中的template部分,添加一个按钮,并绑定一个点击事件export2Excel。 在script部分,通过require.ensure来引入Export2Excel.js文件,并使用export_json_to_excel接口来导出Excel文件。在导出时,可以设置导出的表头(header)、具体数据(data)和文件名(filename)。这里以一个用户列表为例,设置了表头为["索引", "用户名", "密码"],具体数据为this.tableData,文件名为"用户列表"。 最后,通过调用export2Excel方法来触发导出操作。 总结起来,导出Excel文件的步骤如下: 1. 在src目录下创建excel文件夹,并放入Blob.js和Export2Excel.js两个文件。 2. 在Vue组件的template部分添加一个按钮,并绑定点击事件export2Excel。 3. 在script部分引入Export2Excel.js文件,并在export2Excel方法中使用export_json_to_excel接口来导出Excel文件,并设置表头、具体数据和文件名。 这样就可以在Vue2中导出Excel文件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue2.0 导出Excel表格数据](https://blog.csdn.net/Newtaylor/article/details/83410849)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue2中导出Excel](https://blog.csdn.net/qq_40323256/article/details/111305117)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值