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);
      });
  });
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/414903.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode300.最长递增子序列

题目 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 示例 …

GaN建模:强大但富有挑战性

来源:Modeling GaN: Powerful but Challenging(10年) 文章的研究内容 这篇文章主要研究了氮化镓(GaN)高电子迁移率晶体管(HEMTs)的建模问题。GaN HEMTs是微波频段高功率发射器设计中的关键技术…

Linux服务器中文乱码如何解决

如果服务器上数字和英文均可正常展示,只有中文是奇奇怪怪的乱码,那么可以考虑是服务器本身字体输出有问题。 如何在服务器上安装中文宋体字体库呢,排查及安装字体库步骤如下: 使用 fc-list命令检查服务器是否安装字体库如果提示…

若依前后端分离版开源项目学习

前言:vscode中vue代码没有高亮显示,可以下载vetur插件解决,ctrl点击无法跳转函数定义问题,可以下载vue-helper插件解决;idea中ctrl点击函数即可跳转函数定义。 一、登录 1.生成验证码 基本思路: 后端生…

C#,数值计算,求解微分方程的吉尔(Gear)四阶方法与源代码

1 微分方程 微分方程,是指含有未知函数及其导数的关系式。解微分方程就是找出未知函数。 微分方程是伴随着微积分学一起发展起来的。微积分学的奠基人Newton和Leibniz的著作中都处理过与微分方程有关的问题。微分方程的应用十分广泛,可以解决许多与导数…

Ansible自动化运维(四)jinja2 模板、Roles角色详解

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

VUE3搭载到服务器

1.搭建服务器 使用 Windows 自带的 IIS 作为服务器。 步骤如下:https://blog.csdn.net/qq_62464995/article/details/130140673 同时,上面的步骤中,还使用了 cpolar 将 IIS 本地网址映射到公共网址。 注: cpolar客户端&#xf…

【React源码 - 调度任务循环EventLoop】

我们知道在React中有4个核心包、2个关键循环。而React正是在这4个核心包中运行,从输入到输出渲染到web端,主要流程可简单分为一下4步:如下图,本文主要是介绍两大循环中的任务调度循环。 4个核心包: react:…

MySQL 篇-深入了解 DML、DQL 语言(二)

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 DML、DQL 语言说明 2.0 使用 DML 实现对数据管理和操作 2.1 DML - 增添数据 insert 2.2 DML - 修改数据 update 2.3 DML - 删除数据 delete 3.0 使用 DQL 实现对…

使用.NET 升级助手工具将.net framework4.8 MVC项目升级到net6

1 新建.net framework4.8 MVC项目 随便添加一个可以访问的界面用于测试 2 对当前项目进行升级 注意:若要进行升级,首先确保本地已安装相应的sdk,例如:dotnet-sdk-6.0.402-win-x64.exe1.运行cmd命令窗口,进入项目所在…

【蓝桥杯】快读|min和max值的设置|小明和完美序列|​顺子日期​|星期计算|山

目录 一、输入的三种方式 1.最常见的Scanner的输入方法 2.数据多的时候常用BufferedReader快读 3.较麻烦的StreamTokenizer快读(用的不多) StreamTokenizer常见错误: 二、min和max值的设置 三、妮妮的翻转游戏 四、小明和完美序列 五…

Docker之数据卷自定义镜像

目录 一、数据卷 ​二、自定义镜像 2.1自定义centos 一、数据卷 在docker中,数据卷是宿主机的一个可以供一个或多个容器使用的特殊目录,它可以在容器之间共享和重用,本地与容器间传递数据更高效;对数据卷的修改会立马有效&#…

CSS——PostCSS简介

文章目录 PostCSS是什么postCSS的优点补充:polyfill补充:Stylelint PostCSS架构概述工作流程PostCSS解析方法PostCSS解析流程 PostCSS插件插件的使用控制类插件包类插件未来的CSS语法相关插件后备措施相关插件语言扩展相关插件颜色相关组件图片和字体相关…

代码库管理工具Git介绍

阅读本文同时请参阅-----免费的Git图形界面工具sourceTree介绍 Git是一个分布式版本控制系统,它可以帮助开发者跟踪和管理代码历史。Git的命令行工具是使用Git的核心方式,虽然它可能看起来有些复杂,但是一旦掌握了基本命令,你…

基于MQTT协议实现微服务架构事件总线

一、场景描述 昨天在博客《客户端订阅服务端事件的实现方法》中提出了利用websocket、服务端EventEmitter和客户端mitt实现客户端订阅服务端事件,大大简化了客户端对服务端数据实时响应的逻辑。上述方案适用于单服务节点的情形。 对于由服务集群支撑的微服务架构&…

招聘系统架构的设计与实现

在当今竞争激烈的人才市场中,有效的招聘系统对企业吸引、筛选和管理人才至关重要。本文将探讨招聘系统的架构设计与实现,帮助企业构建一个高效、可靠的人才招聘平台。 ## 1. 系统架构设计 ### 1.1 微服务架构 招聘系统通常采用微服务架构,将…

Java JVM虚拟机面试题

Java JVM虚拟机面试题 前言1、ThreadLocal的底层原理和应用?2、Java中的锁池和等待池?3、wait(),yield(),join(),sleep()的区别?4、你们项⽬如何排查JVM问题?5、YGC和FGC发生时间?6、…

11.vue学习笔记(组件生命周期+生命周期应用+动态组件+组件保持存活)

文章目录 1.组件生命周期2.生命周期应用2.1通过ref获取元素DOM结构2.2.模拟网络请求渲染数据 3.动态组件3.1.A,B两个组件 4.组件保持存活(销毁期) 1.组件生命周期 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置…

探索AI视频模型的无限可能:OpenAI的Sora引领创新浪潮

文章目录 📑前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动🌤️总结 📑前言 随着人工智能技术的蓬勃发展,AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中,OpenAI推出的首个AI视…

Spring中 Unsupported class file major version 61 报错

初学Spring时遇到的一个错误&#xff1a;Unsupported class file major version 61 &#xff0c;如图所示&#xff1a; 网上查了一下大概是JDK的版本与Spring的版本不一致导致的错误&#xff1b;刚开始我用的Spring版本是&#xff1a; <dependencies><dependency>…