解决Windows + Chrome 使用Blob下载大文件时,部分情况下报错net:ERR_FAILED 200 (OK)的问题

背景:

部分线上用户反馈,下载文件会报错,但重启电脑又好了。测试无法复现。遂远程客户,发现在下载超过一定阈值大小的文件时,会报错。

但直接点击下载链接,可以正常下载

查阅代码,以前的写法是

javascript 复制代码
function getFileBlob (url) {
	return request({
		url: url,
		method: 'get',
		responseType: 'blob'
	})
}
getFileBlob(url).then(res => {
	let eleLink = document.createElement('a')
	document.body.appendChild(eleLink)
	eleLink.download = fileName
	const uri = window.URL.createObjectURL(res)
	eleLink.href = uri
	eleLink.click()
	window.URL.revokeObjectURL(uri)
})

这个request,是axios封装而来

基本逻辑是:先下载文件到内存(Blob)里,改名后再正常下载

Q:为什么不直接使用url下载,而是要过一遍Blob

A:直接使用url下载,eleLink.download = fileName 修改下载文件名,在非同源情况下不会生效。我们的下载走的是CDN的域名,非同源域名。

解决方案

查阅资料后,决定规避使用Blob做下载

shell 复制代码
npm install streamsaver

代码修改:

javascript 复制代码
import streamSaver from 'streamsaver'

fetch(url + '?response-content-type=application%2Foctet-stream', {
	method: 'GET',
}).then(res => {
	const fileStream = streamSaver.createWriteStream(fileName, { size: file.size })
	return res.body.pipeTo(fileStream).then(() => console.log('下载完成'))
})

问题解决

查阅资料:

Chrome's Blob Storage System Design

Error downloading content with js [net::ERR_FAILED 200 (OK)] #306

The error "net::ERR_FAILED 200 (OK)" appears when the size of the

"blob_storage" folder in your browser profile reaches a certain limit

(which depends on the size of free disk space).

I came across this when I downloaded files with DevTools open,

inspecting the background script of an extension.

It seems that there is a bug in Chrome, because of which, while

DevTools inspects the background extension script (which executes XHRs

with xhr.responseType = "blob"; ) the cache in blob_storage is not

cleared (garbage collected).

In my case, I just needed to close DevTools.

UPD. It's happens on common webpages too.

While DevTools is opened the cache data in "blob_storage" folder from

XMLHttpRequests with xhr.responseType = "blob"; will not be garbage

collected.

Reloading of a webpage helps.

相关推荐
慧一居士11 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead13 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app