vue 中实现下载后端返回的流式数据

验证是否是blob

    /*** @Event 验证是否为blob格式* */export async function blobValidate(data) {try {const text = await data.text();JSON.parse(text);return false;} catch (error) {return true;}}

get请求

     /*** @Event: get请求下载后端返回的数据流* @description: url[String]: 接口地址,params[Object]: 需要携带的参数,name[String]: 导出的文件名[默认取接       	 ResponseHeaders的'content-disposition'的值]* @author: mhf* @time: 2024-01-24 18:37:36**/export function download(url, params, name) {let downloadLoadingInstance;downloadLoadingInstance = Loading.service({text: "正在下载数据,请稍候",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});return service.get(url, {headers: { "Content-Type": "application/x-www-form-urlencoded" },params: params,responseType: "blob",}).then(async (data) => {const isBlob = await blobValidate(data.data);const fileNameEncode =data.headers["content-disposition"].split("filename=")[1];// 解码var fileName = decodeURIComponent(fileNameEncode);if (isBlob) {const blob = new Blob([data.data]);saveAs(blob, fileName || name);} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg = rspObj.message;Message.error(errMsg);}downloadLoadingInstance.close();}).catch((r) => {console.error(r);Message.error("下载文件出现错误,请联系管理员!");downloadLoadingInstance.close();});}

使用示例
在这里插入图片描述
在这里插入图片描述

<el-buttontype="text"@click="handleExport(item.id, item.reportName)"icon="iconfont if-xiazai">下载</el-button>handleExport(id, name) {this.download(requestType.trafficTrend + "/trafficRun/dataReport/exportDay",{ id },`${name}.doc`,);},

post请求

 /*** @Event: post请求下载后端返回的数据流* @description: url[String]: 接口地址,formData[Object]: 需要携带的参数,name[String]: 导出的文件名[默认取接       	 ResponseHeaders的'content-disposition'的值]* @author: mhf* @time: 2024-01-24 18:37:36**/export function downloadPost(formData, url, name) {let downloadLoadingInstance;downloadLoadingInstance = Loading.service({text: "正在下载数据,请稍候",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});return axios({method: "post",url: process.env.VUE_APP_BASE_API + url, // 请求地址data: formData, // 参数responseType: "blob", // 表明返回服务器返回的数据类型headers: {Authorization: getToken(),"Content-Type": "application/json",},}).then(async (data) => {const isBlob = await blobValidate(data.data);const fileNameEncode =data.headers["content-disposition"]?.split("filename=")[1];var fileName = decodeURIComponent(fileNameEncode);if (isBlob) {const blob = new Blob([data.data]);saveAs(blob, fileName);} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg = rspObj.message;Message.error(errMsg);}downloadLoadingInstance.close();});}

拓展

    export function downloadPost(formData, url) {let downloadLoadingInstance;downloadLoadingInstance = Loading.service({text: "正在下载数据,请稍候",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});return axios({method: "post",url: process.env.VUE_APP_BASE_API + url, // 请求地址data: formData, // 参数responseType: "blob", // 表明返回服务器返回的数据类型headers: {Authorization: getToken(),"Content-Type": "application/json",},}).then(async (data) => {const isBlob = await blobValidate(data.data);const fileNameEncode =data.headers["content-disposition"].split("filename=")[1];var fileName = decodeURIComponent(fileNameEncode);if (isBlob) {// 判断返回的是文件流const blob = new Blob([data.data]);saveAs(blob, fileName);} else {let isBlob1 = await blobValidate(data)if (isBlob1) {// 判断返回的是数据流const blob1 = new Blob([data.data]);saveAs(blob1, fileName);} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg = rspObj.message;Message.error(errMsg);}}downloadLoadingInstance.close();});}

使用示例

    downloadPost(response.data,requestType.system + "/system/axis/exportExcel");

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RockyLinux8 RockyLinux9安装postgresql16-devel开发包

1、PG的插件扩展有些需要自行编译&#xff0c;需要安装PG开发包 2、RockyLinux8安装 #创建用户先 useradd postgressudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-8-x86_64/pgdg-redhat-repo-latest.noarch.rpm sudo dnf -qy module disab…

计算机网络复试总结(五)

可能会问&#xff1a; 基础知识问题&#xff1a; 请简述TCP/IP协议栈的层次结构及其功能。 TCP/IP协议栈的层次结构及其功能可以简要概述如下&#xff1a; 层次结构&#xff1a; TCP/IP协议栈通常被划分为四个主要层次&#xff0c;从底层到高层分别是网络接口层&#xff08;也…

Flutter 旋转动画 线性变化的旋转动画

直接上代码 图片自己添加一张就好了 import dart:math;import package:flutter/material.dart;import package:flutter/animation.dart;void main() > runApp(MyApp()); //旋转动画 class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {re…

【python】正则表达式

文章目录 正则表达式对象re.RegexObjectre.MatchObject符号说明匹配基础匹配?=、?<=、?!、?<!字符类re模块编译正则表达式compile 函数匹配字符串re.matchre.searchre.findallre.finditer替换字符串re.sub分割字符串re.split正则表达式修饰符 - 可选标志主要用于网页…

ESCTF-逆向赛题WP

ESCTF_reverse题解 逆吧腻吧babypybabypolyreeasy_rere1你是个好孩子完结撒花 Q_W_Q 逆吧腻吧 下载副本后无壳&#xff0c;直接拖入ida分析分析函数逻辑&#xff1a;ida打开如下&#xff1a;提取出全局变量res的数据后&#xff0c;编写异或脚本进行解密&#xff1a; a[0xBF, …

Spring Task 知识点详解、案例、源代码解析

简介&#xff1a;Spring Task 定时任务   所谓定时任务。就是依据我们设定的时间定时运行任务&#xff0c;就像定时发邮件一样&#xff0c;设定时间到了。邮件就会自己主动发送。 在Spring大行其道的今天&#xff0c;Spring也提供了其定时任务功能&#xff0c;Spring Task。同…

【ARM64 常见汇编指令学习 22 -- ARMv8/v9 入栈寄存器介绍】

文章目录 ARMv8/v9 入栈寄存器介绍可以不入栈的寄存器需要入栈的寄存器&#xff08;被调用者保存的寄存器&#xff09;入栈顺序出栈顺序示例汇编代码 ARMv8/v9 入栈寄存器介绍 在 ARMv8 架构中&#xff0c;函数调用遵循一组称为 AAPCS64 &#xff08;ARMv8 64-bit Procedure C…

3.3 数据定义 数据库与系统概论

目录 3.3.1 模式的定义与删除 1. 定义模式 2. 删除模式 CASCADE&#xff08;级联&#xff09; RESTRICT&#xff08;限制&#xff09; 3.3.2 基本表的定义、删除与修改 表的定义 2.数据类型 3. 模式与表 4. 修改基本表 5. 删除基本表 3.3.3 索引的建立与删除 1. …

力扣刷题44-46(力扣0062/0152/0198)

62. 不同路径 题目描述&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff0c;机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角。问总共有多少条不同的路径&#xff1f; 思路&#xff1a; 其实就是问(0,0)->(m-1,n-1)一共有几条路。 第一个…

如何实高可用性(HA)的 Nginx 集群

声明&#xff1a;内容来自AI&#xff0c;未经验证&#xff0c;仅供参考! 为了实现高可用性&#xff08;HA&#xff09;的 Nginx 集群&#xff0c;可以使用 Linux Virtual Server (LVS) 作为负载均衡器。LVS 是 Linux 内核内置的负载均衡软件&#xff0c;它支持多种调度算法&…

突破限制:亚信安慧AntDB高速处理能力的解密

AntDB不仅仅是一款优秀的数据库管理系统&#xff0c;更是一套提供丰富数据分析和处理工具的集合&#xff0c;它为用户提供了更多可能性&#xff0c;帮助他们深入理解数据、挖掘数据背后的价值。在当今信息爆炸的时代&#xff0c;数据已经成为企业决策的重要支撑&#xff0c;而A…

QT_day4:对话框

1、完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&…

ubuntu下安装minconda

1.搜索清华源 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 2.搜索conda 3.选一个合适自己的下载到本地 4.将下载的文件传入到ubuntu中 bash Miniconda3-py311_23.11.0-1-Linux-x86_64.sh 安装 5.source ~/.bashrc 激活即可&#xff08;必要步骤&#xff09;

Qt实现简易的多线程TCP服务器(附源码)

目录 一.UI界面的设计 二.服务器的启动 三.实现自定义的TcpServer类 1.在widget中声明自定义TcpServer类的成员变量 2.在TcpServer的构造函数中对于我们声明的m_widget进行初始化&#xff0c;m_widget我们用于后续的显示消息等&#xff0c;说白了就是主界面的更新显示等 …

[JVM]——垃圾回收

学习内容&#xff1a; GC、垃圾回收器、垃圾回收算法 目录 一、GC垃圾回收算法 1.1 可达性分析法 1.1.1 GC ROOT对象&#xff1a; 1.1.3 四种引用方式&#xff1a; ⭐小结&#xff1a; 1.2 其他回收算法 二、详解分代回收法&#xff1a; 三、垃圾回收器 3.1 串行垃圾…

人才测评,招聘视频制作影视设计师岗位的测评方案

常见的酷炫的视频&#xff0c;短视频&#xff0c;以及广告特效&#xff0c;年会中的各种片子&#xff0c;可以说各种各样的视觉盛宴&#xff0c;它们可都是出自影视后期的设计之手&#xff0c;尤其是当下短视频的兴起&#xff0c;抖音快速阿婆主&#xff0c;直播带货和主播&…

git笔记之撤销、回退、reset方面的笔记

git笔记之撤销、回退、reset方面的笔记 code review! 文章目录 git笔记之撤销、回退、reset方面的笔记1.git 已经commit了&#xff0c;还没push&#xff0c;如何撤销到初始状态git reset --soft HEAD~1git reset HEAD~1&#xff08;等同于 git reset --mixed HEAD~1&#xff0…

二十二、软考-系统架构设计师笔记-真题解析-2018年真题

软考-系统架构设计师-2018年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.在磁盘调度管理中&#xff0c;应先进行移臂调度&#xff0c;再进行旋转调度。假设磁盘移动臂位于21号柱面上&#xff0c;进程的请求序列如下表所示。如果采用最短移臂调度算法&#xff0c;那么系统…

详解Python面向对象编程(一)

类和对象 面向过程——怎么做&#xff1f; &#xff08;1&#xff09;把完成某一需求的所有步骤、从头到尾&#xff0c;逐步实现 &#xff08;2&#xff09;根据开发需求&#xff0c;将某些功能独立的代码块封装成一个又一个的函数 &#xff08;3&#xff09;最后完成的代码&a…

SpringBoot自定义stater开发:拦截器开发

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…