背景：
部分线上用户反馈，下载文件会报错，但重启电脑又好了。测试无法复现。遂远程客户，发现在下载超过一定阈值大小的文件时，会报错。
但直接点击下载链接，可以正常下载
查阅代码，以前的写法是
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 = fileNameconst uri = window.URL.createObjectURL(res)eleLink.href = urieleLink.click()window.URL.revokeObjectURL(uri)
})
这个request，是axios封装而来
基本逻辑是：先下载文件到内存(Blob)里，改名后再正常下载
Q：为什么不直接使用url下载，而是要过一遍Blob
A：直接使用url下载，eleLink.download = fileName 修改下载文件名，在非同源情况下不会生效。我们的下载走的是CDN的域名，非同源域名。
解决方案
查阅资料后，决定规避使用Blob做下载
npm install streamsaver
代码修改:
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.
