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

相关推荐
斜月三几秒前
windows部署多实例filebeat监控相同路径下文件
windows·filebeat
01传说22 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端