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

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）