填坑之路:二进制数据流文件下载

本文记录了在前端处理服务端返回的二进制数据流文件下载时遇到的问题及解决方法,包括尝试使用window.open()失败,利用Blob对象进行文件处理,以及设置XMLHttpRequest的responseType以避免乱码问题。
摘要由CSDN通过智能技术生成

痛点是保存服务端返回的二进制数据流文件。

由于之前遇到的都是服务端直接返回文件地址,前端直接 window.open(url) 下载保存的,所以初次遇到文件流保存的,也是很头痛的。

在这里插入图片描述
初尝试
直接再用老办法试试?

window.open(res.data)

结果很尴尬,现象是从当前窗口 http://localhost:8083/#/list 新开了一个窗口 http://localhost:8083/[object%20ArrayBuffer]#/list ,并没有下载任何文件。

再尝试
总结之前的初尝试,发现很愚蠢:res.data 是一个二进制文件流,而平时我们使用 window.open(),参数带的是url,并不是任何其他格式的数据。

那么,我们接下来考虑,既然服务端返回的是一个二进制流,那么我们前端是不是有什么工具或者方法能够接收并处理这种二进制流的呢?

一番了解,Blob对象跳入眼中:

Blob是一种JavaScript的对象类型,表示一个不可变、原始数据的类文件对象。HTML5的文件操作对象,其他操作二进制数据的API(比如File对象),都是建立在Blob对象基础上的,继承了它的属性和方法。

完美对接。

let blob = new Blob([res.data], {
   type: "appl
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值