解决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.