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

news2024/11/16 2:38:12

验证是否是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-button
            type="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.coloradmin.cn/o/1545328.html

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

相关文章

【No.17】蓝桥杯图论上|最短路问题|Floyd算法|Dijkstra算法|蓝桥公园|蓝桥王国(C++)

图的基本概念 图&#xff1a; 由点(node&#xff0c;或者 vertex)和连接点的边(edge)组成。图是点和边构成的网。 树&#xff1a;特殊的图树&#xff0c;即连通无环图树的结点从根开始&#xff0c;层层扩展子树&#xff0c;是一种层次关系&#xff0c;这种层次关系&#xff0…

Multimodal Chain-of-Thought Reasoning in Language Models阅读笔记

论文&#xff08;2023年&#xff09;链接&#xff1a;https://arxiv.org/pdf/2302.00923.pdf GitHub项目链接&#xff1a;GitHub - amazon-science/mm-cot: Official implementation for "Multimodal Chain-of-Thought Reasoning in Language Models" (stay tuned a…

美国socks5动态IP代理如何提升网络效率?

在探讨美国socks5代理动态IP的奥秘之前&#xff0c;我们需要先深入理解其背后的基本概念和原理。Socks5代理是一种先进的网络协议&#xff0c;它像一位中转站&#xff0c;默默地帮用户转发网络请求。它让网络流量得以通过代理服务器传输&#xff0c;进而隐藏用户的真实IP地址。…

独立游戏《星尘异变》UE5 C++程序开发日志3——UEC++特供的数据类型

本篇日志将介绍FString&#xff0c;FText、FName的用法和相互转换&#xff0c;以及容器TMap&#xff0c;TArray的增删查改 一、字符串相关数据类型&#xff1a;FString、FText、FName FString是最接近std::string的类型&#xff0c;字符串本身可以看做一个存储char型的动态数…

Spire.PDF for .NET【文档操作】演示:查找并删除 PDF 中的空白页

PDF 中的空白页并不罕见&#xff0c;因为它们可能是作者故意留下的或在操作文档时意外添加的。当您阅读或打印文档时&#xff0c;这些空白页可能会很烦人&#xff0c;因此可能非常有必要将其删除。在本文中&#xff0c;您将了解如何使用Spire.PDF for .NET以编程方式查找和删除…

Docker创建mysql容器本地版

1.下载docker desktop https://www.docker.com/products/docker-desktop/ 2. 创建容器 docker run 创建并启动mysql容器 --name 容器名字 -d 后台运行容器 -p 映射端口 -e 参数 截至目前最新的mysql是mysql8.0.36 那就整这个试下。 docker run -d --name mysql-cont…

【笔记】深入理解JVM机制

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 JVM 运⾏流程图 JVM 中内存区域划分 方法区 / 元数据区 堆 栈 程序计数器 本地方法栈 内存区域总结 JVM 中类加载过程 …

flask_restful渲染模版

渲染模版就是在 Flask_RESTful 的类视图中要返回 html 片段代码&#xff0c;或 者是整个html 文件代码。 如何需要浏览器渲染模板内容应该使用 api.representation 这个装饰器来定 义一个函数&#xff0c; 在这个函数中&#xff0c;应该对 html 代码进行一个封装&#xff…

【Java程序设计】【C00368】基于(JavaWeb)Springboot的箱包存储系统(有论文)

TOC 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&#xff0c;开发过上千套毕业设计程序&#xff0c;博客中有上百套程序可供参考&#xff0c;欢迎共同交流学习。 项目简介 项目获取 &#x1f345;文末点击卡片…

编译u-boot(硬件: atk-dl6y2c)和NFS/EMMC模式启动Linux Kernel

目录 概述 1 编译u-boot 1.1 解压文件 1.2 编译u-boot 2 配置环境 2.1 在Ubunt 搭建TFTP 2.2 建立下载目录 3 烧写bootloader到SD 4 使用NFS模式启动板卡 5 从EMMC 启动 Linux 系统 5.1 通过配置参数方式 5.2 使用命令直接启动内核 文中使用的代码下载地址&#xf…

MySQL 8.x 高可用集群之MGR(组复制)

MySQL 8.x 高可用集群之MGR&#xff08;组复制&#xff09; 前言一、集群部署1.1 修改主机名和关闭selinux1.2 MySQL安装1.2.1 **移除Linux自带安装的mariadb数据库**1.2.2 下载安装文件1.2.3 顺序执行安装1.2.4 启动mysql并修改密码1.2.5 开启防火墙端口允许访问 1.3 修改mysq…

模仿羊羊~消消乐

慎玩&#xff01;随机生成、不保证能消完哦&#xff01; 游戏试玩&#xff1a; 链接: https://pan.baidu.com/s/1IwtOd__8Ca0bSouMP8kEzw 提取码: 6yhd

[深度学习]yolov8+pyqt5搭建精美界面GUI设计源码实现五

【简单介绍】 依托先进的目标检测算法YOLOv8与灵活的PyQt5界面开发框架&#xff0c;我们倾力打造出了一款集直观、易用与功能强大于一体的目标检测GUI界面软件。通过深度融合YOLOv8在目标识别领域的出色性能与PyQt5的精美界面设计&#xff0c;我们成功推出了一款高效且稳定的软…

【Web】浅聊Jackson序列化getter的利用——POJONode

目录 核心速览 原理分析 EXP TemplatesImpl利用 SignedObject利用 核心速览 writeValueAsString是jackson序列化自带的入口&#xff0c;在调用该方法的过程中将会通过遍历的方法将bean对象中的所有的属性的getter方法进行调用 下面介绍如下利用链&#xff1a; BadAttrib…

python3游戏GUI--开心打地鼠游戏By:PyQt5(附下载地址)

文章目录 一&#xff0e;前言二&#xff0e;游戏预览1.启动2.开始游戏3.游戏结束4.排行榜 三&#xff0e;游戏思路四&#xff0e;总结 一&#xff0e;前言 第一次用PyQt做游戏&#xff0c;有点小紧张呢。本次使用PyQt5制作一款简单的打地鼠游戏&#xff0c;支持基本游戏玩法、…

IO网络通信

IO Bio&#xff1a; 同步阻塞&#xff0c;一个线程一次连接&#xff0c;基于字符流/字节流 Nio&#xff1a;同步非阻塞 一个线程多个连接&#xff0c;多个请求注册到多路复用selector上&#xff0c;多路复用器轮训连接 面向缓冲区&#xff0c; 从某通道读取数据到缓存区&…

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

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

csdn最全面的网安面试题汇总——小白篇

防范常见的 Web 攻击 什么是 SQL 注入攻击 攻击者在 HTTP 请求中注入恶意的 SQL 代码&#xff0c;服务器使用参数构建数据库 SQL 命令时&#xff0c;恶意SQL 被一起构造&#xff0c;并在数据库中执行。 用户登录&#xff0c;输入用户名 lianggzone&#xff0c;密码 ‘ or ‘…

程序员如何兼职赚小钱?

程序员由于有技术和手艺其实兼职赚钱的路子还是挺多的&#xff0c;只要你有足够的时间。 1. 做外包 这是比较传统的方式&#xff0c;甲方在一些众包平台上发布开发任务&#xff0c;你可以抢这个任务&#xff0c;但是价格都比较便宜。 任务比较多的平台: 猪八戒、一品威客、开…

【Java】哈希表

文章目录 一、概念二、哈希冲突2.1概念2.2设计合理的哈希函数-避免冲突2.3调节负载因子-避免冲突2.4闭散列-冲突解决&#xff08;了解&#xff09;2.5开散列/哈希桶-冲突解决&#xff08;重点掌握&#xff09; 三、代码实现3.1成员变量及方法的设定3.2插入3.3重新哈希3.4 获取到…