前端接收流,并下载到本地

碰到一个大坑,附件文件存在华为云上,查询列表里记录的附件给了一个https开头的url,要求点击附件图标,下载附件到本地,

思路1.直接<a href='url' download='fileName' >下载</a>

实际效果:跨域下载不了,

思路2.接口调用url,然后返回的流通过window.URL.createObjectURL(blob)下载

const res = await get(url, params, { responseType: 'blob', });
    console.info('----------------res-----', res)
    if (res) {
        
        const blob = new Blob([res], { type: 'application/pdf;charset=utf-8'});
        let url2 = window.URL.createObjectURL(blob);
        let link = document.createElement("a");
        link.style.display = "none";
        link.download = param.fileName;
        link.href = url2;
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(link.href)
    } else {
        error();
    }



---封装的get方法
const get = async (url, param = {}, header = {}) => {
    try {
            const response = await axios({
                url: `${url}`,
                method: "get",
                params: param,
                requestId: url,
                timeout: 30000,
                headers: header,
            });
            return response.data;
        } catch (err) {
            return {
                isError: true,
                statusCode: -10001,
                message: "接口异常",
                data: null,
            };
        }
};

结果打印日志,显示返回了乱码流文件,下载出的文件大小感觉没问题,但是打不开(报错),前端日志如下,

展示效果如下:

怎么检查感觉都没问题,这流文件明明都打印出来取到了,文件大小也跟上传的大小差不多,改了快一天,终于发现,是get方法有问题,看着返回的是流,其实不是Blob,修改如下

const getStream = async (url, param = {}, header = {}) => {
    try {
            const response = await axios({
                url: `${url}`,
                method: "get",
                params: param,
                requestId: url,
                timeout: 30000,
                responseType: 'blob',
                headers: header,
            });
            return response.data;
        } catch (err) {
            return {
                isError: true,
                statusCode: -10001,
                message: "接口异常",
                data: null,
            };
        }
};

axios参数加了responseType: 'blob',如果不加默认是json,完美解决

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

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

相关文章

Java批量修改文件目录名称(树行结构、批量重命名)

Java批量修改文件目录名称(树行结构、批量重命名) 1.读取某个路径的文件目录结构 2.递归批量修改目录文件前缀进行递增 3.结果截图 4.代码 package com.zfi.server.device;import java.io.File; import java.util.Arrays; import java.util.Comparator;public class FileTest…

【ArcPy】游标访问几何数据

访问质心坐标相关数据 结果展示 代码 import arcpy shppath r"C:\Users\admin\Desktop\excelfile\a2.shp" with arcpy.da.SearchCursor(shppath, ["SHAPE","SHAPEXY","SHAPETRUECENTROID","SHAPEX","SHAPEY",&q…

2024抖店全新教程,关于选品和对接达人的流程,细节分享如下

我是王路飞。 对做无货源抖店的商家来说&#xff0c;如何找到一个好的产品&#xff0c;并且把它卖出去&#xff0c;非常重要。 因此&#xff0c;商家的选品能力、达人资源的对接&#xff0c;就很关键了。 今天给你们聊下2024年做抖店&#xff0c;如何选品并且对接到靠谱的带…

MySQL王国:从基础到高级的完整指南【文末送书-28】

文章目录 MySQL从入门到精通第一部分&#xff1a;MySQL基础第二部分&#xff1a;MySQL进阶第三部分&#xff1a;MySQL高级应用 MySQL从入门到精通&#xff08;第3版&#xff09;&#xff08;软件开发视频大讲堂&#xff09;【文末送书-28】 MySQL从入门到精通 MySQL是一种开源…

记录开发过程中遇到的oracle 分页问题

问题: oracle 分页查询,因为是相对来说比较复杂的sql,一直以为是union all 的问题. 结果是相同时间相同,order by 时间之后 、分页查询的每次结果都不能保证与自己直接查询的不分页数据保持一致、导致有些数据看不到 解决方案: order by 条件最后添加一个表中不会重复的字段比如…

复合机器人上下料方案:从设计到实施的全过程

随着智能制造和工业自动化的快速发展&#xff0c;复合机器人上下料方案已成为提高生产效率、降低人力成本的关键技术。 方案设计 1、需求分析&#xff1a;首先&#xff0c;需要对生产线的上下料需求进行深入分析&#xff0c;包括物料种类、尺寸、重量、上下料频率等&#xff…

八大技术架构演进之路【小林优选,呕心沥血】

概述 在进行技术学习过程中&#xff0c;由于大部分读者没有经历过一些中大型系统的实际经验&#xff0c; 导致无法从全局理解一些概念&#xff0c;所以本文以一个 "电子商务" 应用为例&#xff0c;介绍从一百个 到千万级并发情况下服务端的架构的演进过程&#xff0c…

三级分销数据库设计

一&#xff0c;数据结构 二&#xff0c;查询方法 1.mysql递归查询 获取id9的所有上级 r : 9 设置自己所要搜索子节点的id SELECTT2.* FROM(SELECTr AS _id,( SELECT r : pid FROM sj_user WHERE id _id ) AS 2v2,l : l 1 AS lvl FROM( SELECT r : 9 ) vars, -- 查询id为…

MS2351M——RF 检测器/控制器

产品简述 MS2351M 是一款对数放大器芯片&#xff0c;主要用于接收信号强度 指示 RSSI 与功率放大器控制&#xff0c;工作频率范围是 50M  3000MHz &#xff0c; 因频率与温度不同&#xff0c;动态范围达 35dB 到 45dB 。 MS2351M 是电压响应器件&#xff0c; 50M…

哪些大型国企会储备GIS开发工程师?

随着数字化技术的不断发展和国家对数字化转型的重视&#xff0c;国企作为国民经济的中坚力量&#xff0c;开始走在数字化转型的前列。 许多国企&#xff0c;已经将数字化转型作为企业发展的重点战路&#xff0c;希望通过数字化技术的应用&#xff0c;推动企业的业务模式、管理…

Java8的Stream执行机制

Java8的Stream执行机制 Stream的概念解说Stream的概念解说-Stream的含义Stream的概念解说-现实类比Stream的概念解说-Stream中的概念Stream的执行机制Stream的执行机制-最直接的流水线实现方式Stream的执行机制-for循环也能干的事Stream的执行机制-基本类图Stream的执行机制-记…

短视频矩阵系统--抖去推---年后技术还能迭代更新开发运营吗?

短视频矩阵系统#短视频矩阵系统已经开发3年&#xff0c;年后这个市场还能继续搞吗&#xff1f;目前市面上开发短视频账号矩阵系统的源头公司已经不多了吧&#xff0c;或者说都已经被市场被官方平台的政策影响的不做了吧&#xff0c;做了3年多的矩阵系统开发到现在真的是心里没有…

Vue2:路由history模式的项目部署后页面刷新404问题处理

一、问题描述 我们把Vue项目的路由模式&#xff0c;设置成history 然后&#xff0c;build 并把dist中的代码部署到nodeexpress服务中 访问页面后&#xff0c;刷新页面报404问题 二、原因分析 server.js文件 会发现&#xff0c;文件中配置的路径没有Vue项目中对应的路径 所以…

python报名人数 2023年9月青少年编程电子学会python编程等级考试二级真题解析

目录 python报名人数 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python报名人数 2023年9月 python编程等级考试级编程题 一、题目要求 1…

20240301-1-ZooKeeper面试题(一)

1. ZooKeeper 面试题&#xff1f; ZooKeeper 是一个开放源码的分布式协调服务&#xff0c;它是集群的管理者&#xff0c;监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终&#xff0c;将简单易用的接口和性能高效、功能稳定的系统提供给用户。 分布式应…

专家揭密,OLED透明屏原的原理

OLED透明屏的原理主要基于OLED&#xff08;有机发光二极管&#xff09;的发光特性。这种屏幕使用透明的电极和有机材料层&#xff0c;通过电流激发有机材料层中的载流子&#xff0c;使其进入发光材料并发生电荷复合&#xff0c;从而释放出光能。 具体来说&#xff0c;OLED透明屏…

【嵌入式】STM32控制脉冲个数

控制脉冲个数两种方式:中断技术、主从定时器技术。 1.主从模式控制 2.cubemx配置 2.1主定时器 以TIM3为例子。 1)从模式:失能; 2) 触发源:不选择; 3)内部时钟:勾选; 4)输出通道:CH2 pwm模式; 5)单脉冲模式:不选择;

006-CSS-常见问题汇总

常见问题汇总 1、伪元素与伪类2、偏门但好用的样式3、文字溢出三个点展示4、空白折叠问题5、文字的垂直居中6、 Vue项目中 在父组件中修改子组件样式7、BFC 概念7.1、兄弟元素外边距合并7.2、父子元素外边距塌陷 8、box-sizing8.1、box-sizing: border-box8.2、box-sizing: con…

Tensorflow2.0+部署(tensorflow/serving)过程备忘记录Windows

Tensorflow2.0部署&#xff08;tensorflow/serving&#xff09;过程备忘记录 部署思路&#xff1a;采用Tensorflow自带的serving进模型部署&#xff0c;采用容器docker 1.首先安装docker 下载地址&#xff08;下载windows版本&#xff09;&#xff1a;https://desktop.docke…

VM新建虚拟机

目录 一、前言二、下载镜像三、新建虚拟机 一、前言 上一篇文章我们介绍了VMware Workstation 15 Pro的安装与破解 &#xff0c;这篇文章我们介绍一下新建虚拟机 二、下载镜像 Linux使用最多的是CentOS和Ubuntu&#xff0c;下面是下载地址 Centos7:https://www.centos.org/…