chrome下载大文件提示网络错误,其它浏览器都正常,包含问题与解决方法

您所在的位置:网站首页 浏览器下载文件失败是什么原因 chrome下载大文件提示网络错误,其它浏览器都正常,包含问题与解决方法

chrome下载大文件提示网络错误,其它浏览器都正常,包含问题与解决方法

2024-07-17 14:56| 来源: 网络整理| 查看: 265

chrome下载大文件提示网络错误,其它浏览器都正常

在这里插入图片描述 试过很多方式,什么下载最新谷歌浏览器咯,什么response.setContentType中加分号(”;“),什么关闭http-debugger服务之类的。。。统统不行。

最后的解决办法是把responseType的blob变成arraybuffer然后就可以了。

我:为什么? AI: 谷歌浏览器在处理大文件下载时可能会对 Blob 下载进行限流,这可能是因为 Blob 对象的特性导致浏览器在处理大文件时出现问题。相比之下,使用 ArrayBuffer 可能会更适合大文件下载,因为它允许更灵活的数据处理,并且在某些情况下可以避免浏览器的限制。

如果在你的情况下使用 ArrayBuffer 能够正常下载文件并避免网络链接失败的提示,那么你可以考虑继续使用 ArrayBuffer 来处理大文件下载。不过需要注意的是,处理 ArrayBuffer 对象和保存文件可能需要一些额外的步骤,例如将 ArrayBuffer 转换为 Blob 对象,然后再进行保存操作。

在处理大文件下载时,另一个选择是使用流式传输(Streaming),即在接收到数据的同时就开始处理和保存,这样可以避免浏览器对大文件下载的限制。

总之,根据你的具体需求和浏览器的限制,选择合适的数据类型以及合适的处理方式是非常重要的。如果 ArrayBuffer 能够满足你的需求并避免了浏览器的限制,那么可以考虑继续沿用这种方法来处理大文件下载。

2024-5-24补充事项

哪怕使用arraybuffer也并非能完美解决问题 谷歌浏览器版本 124.0.6367.208 1.使用arraybuffer后,谷歌浏览器下载1G到2G左右的流文件是能正常处理并下载,而当返回文件达到了3G以上时,内存消耗爆炸,要不就是浏览器崩溃,要不就是下载的文件只有几K或者几B。 2.分开下载数据,使用jszip来让前端组成压缩文件。(实际中的情况是就是列表中的所有数据,让后端一次性全部返回。而现在则是分别下载单个数据后前端来处理)。但是谷歌浏览器会提示 (Uncaught (in promise) DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired.) AI给出的回答是(这个错误通常是由于浏览器的安全策略导致的,它表示试图读取文件时出现了权限问题。这可能是由于以下原因之一引起的: 跨域访问问题: 如果你正在尝试读取的文件位于与你的网页不同的域中,浏览器可能会阻止读取操作。这是浏览器的同源策略所致。你可以尝试将文件放置在与网页相同的域中,或者通过 CORS(跨域资源共享)设置服务器响应头来解决跨域问题。 文件不存在或路径错误: 确保你正在尝试读取的文件确实存在,并且路径是正确的。 权限问题: 确保文件具有适当的读取权限,特别是在浏览器的安全环境中。在某些情况下,浏览器可能会限制对本地文件系统的访问。 文件类型问题: 确保你正在尝试读取的文件类型受到浏览器支持,并且浏览器允许对其进行读取操作。 你可以仔细检查代码,确认是否有涉及到以上问题,并尝试解决。如果问题仍然存在,你可以提供更多的代码细节和环境信息,以便更好地帮助你解决问题。) 其它浏览器倒是能处理,不过也只是处理小数据量。

2024-5-27完美解决

解决方法 streamsaver.js 大家可以百度下了解 npm i streamsaver import streamSaver from “streamsaver”

export async function streamSaverTest(url, name) { var url = baseURL + url const currentUrl = window.location.origin; StreamSaver.mitm = `${currentUrl}/mitm.html?version=2.0.0` const fileStream = StreamSaver.createWriteStream(`${name}.zip`); fetch(url, { method: 'GET', headers: { 'Authorization': 'Bearer ' + getToken() }, }).then((res) => { console.log('=-res', res) const readableStream = res.body if (window.WritableStream && readableStream.pipeTo) { return readableStream.pipeTo(fileStream).then(() => console.log('下载完成')) } }) }

为什么vue中不用axios?而用fetch 因为在 axios中,responseType 选项的合法值为字符串 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, 和 ‘text’。它们分别对应不同的响应类型。对于流式传输,axios本身不支持直接将响应类型设置为流(‘stream’)。如果你想要使用流式传输,你可以尝试直接使用原生的 fetch 函数,因为它对流式传输的支持更好一些。

2024-5-29扩展补充

内网环境中使用会有失败的情况,解决方式原文

下载文件 https://github.com/jimmywarting/StreamSaver.js/blob/master/mitm.html https://github.com/jimmywarting/StreamSaver.js/blob/master/sw.js 并放入public目录中 对streamSaver.mitm的进行修改,什么环境用什么地址(线上环境必须是https)



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3