情况描述:
- 谷歌版本:129.0.6668.90 (正式版本) (64 位) (cohort: Control)
- 其他浏览器,比如火狐没有问题,但是谷歌会下载失败,故推断为谷歌浏览器导致的问题
- 小文件比如1、2M会成功,大概10M以上会下载失败
- 偶发,有些电脑的谷歌不会,有些会
尝试办法
- 比如让后端返回流的长度,但是后端给的方案是下载是封装的,不可行
- 让后端返回下载地址再下载,不过这样会导致存储很多无用文件,不可行
- 出现问题换个浏览器尝试,会导致用户体验感变差,不可行
解决办法
问题出现的时候一直在排查原因,网上给的资料也比较少,据说是谷歌124之后出现的问题,所以花费了比较长的时间,但是最后将blob
换成arraybuffer
,成功了,也测试了以下其他浏览器,没有兼容问题,大致解决方法如下:
// api 方法
export function downFile(data?: Object) {
return request({
url: 'api地址',
method: 'post',
// 谷歌对blob流有大小显示,使用arraybuffer
responseType: 'arraybuffer',
data,
})
}
下载arraybuffer流:
export function downArraybufferFile(response: any, fileName: string) {
// 处理返回的文件流
const arraybuffer = response;
if (arraybuffer && arraybuffer.size === 0) {
useMessage().error('内容为空,无法下载');
return;
}
const link = document.createElement('a');
var binaryData = [] as any;
binaryData.push(response);
link.href = window.URL.createObjectURL(new Blob(binaryData, { type: 'arraybuffer' }));
link.download = fileName;
document.body.appendChild(link);
link.click();
window.setTimeout(function () {
URL.revokeObjectURL(arraybuffer);
document.body.removeChild(link);
}, 0);
}
参考文章
https://blog.csdn.net/qq_45599738/article/details/134467853
https://blog.csdn.net/u012190388/article/details/130142638
https://blog.csdn.net/qq_45599738/article/details/134467853
https://blog.csdn.net/weixin_42651102/article/details/107118661