vue下载数据流文件

本文介绍了在Vue.js应用中如何处理前端下载URL链接文件和文件流。对于URL链接,可以通过a标签或window.open()方法下载。对于文件流,需使用Blob对象处理,通过动态创建a标签实现下载。在处理文件流时,遇到的问题是下载的文件出现乱码或无法打开,原因是axios请求的responseType未设置为arraybuffer或blob,设置后能正确下载文件。
摘要由CSDN通过智能技术生成

日常开发中我们常常需要下载文件,但是后端返回给前端需要下载的文件大致有两种:一种url链接,另一种文件流的形式;

1、前端下载url链接文件

方法1、通过a标签的href直接下载

<a href="https://www.baidu.com/img/bd_logo1.png" download="logo"></a>

方法2、通过 window.open(url) 直接下载

window.open("https://www.baidu.com/img/bd_logo1.png")

2、前端处理 文件流 文件

针对文件流文件,前端需要进行文件类型,blob处理以后通过动态创建a标签的形式下载
Blob对象处理
MDN上描述:Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。 要从其他非blob对象和数据构造一个 Blob,请使用 Blob() 构造函数
在这里插入图片描述
需要利用Blob()构造函数构建一个blob对象,axios请求例子:

axios.get( url, params ).then((res) => {
   
    const data = res
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值
>