目前前端没有很好的 api 支持流式的文件的分片下载。如果直接把整个文件保存到 Blob 对象中再保存，有可能出现很多不可以预期的问题，可能会因为达到浏览器的 Blob 对象上限而下载失败。也有机会因为客户端内存太低而导致 OOM。那如果我们有额外的文件服务器的话，可以选择把文件先导出到文件服务器，然后前端再通过文件路径由浏览器处理下载。但是如果又没有额外的文件服务器，又想要支持分片下载，这就是这篇文章的主题。
# StreamSaver.js 的工作原理
StreamSaver.js 采用了不同的方法。现在，您可以创建一个直接到文件系统的可写流，而不是将数据保存在客户端存储或内存中（我说的不是 chromes 沙盒文件系统或任何其他网络存储）。这是通过模拟服务器如何指示浏览器使用某个响应头 + 服务工作者来保存文件来实现的 如果您试图保存的文件来自云 / 服务器，请使用服务器，而不是模拟浏览器使用 StreamSaver 在磁盘上保存文件的操作。添加那些额外的响应头，不要使用 AJAX 来获取它。FileSaver 有一个很好的关于使用头的 wiki。如果您无法更改标题，那么您可以使用 StreamSaver 作为最后手段。FileSaver、streamsaver 和其他类似的应用程序主要用于浏览器内客户端生成的内容。
StreamSaver.js 通过伪造一个服务器文件的链接，伪造的服务器收文件下载到请求返回 Content-Disposition 头告诉浏览器开始下载文件。但实际上这个文件服务器并不存在并且内容也不在服务器上。因此，他的解决方案是创建一个 Service Worker (sw.js)，它可以拦截请求并使用 responsdWith () 伪装成服务器。
# 中间人 MITM
既然是伪造的服务器，那必然涉及到中间人，默认 StreamSaver.js 的 MITM 是 https://jimmywarting.github.io/StreamSaver.js/mitm.html?version=2.0.0。
如果你的客户端是联网的而且是可以访问 github 那没有问题，那如果你的站点是内网或客户端根本无法访问 github 那问题就来了，下载根本无法触发。
在 JavaScript 中，MITM 代表 "Man-in-the-Middle"，这是一种网络攻击技术。在这种攻击中，攻击者秘密地插入他们自己的设备或软件，从而在一个两方或多方的通信中间接收、修改、甚至拦截消息。这种攻击可以在没有任何一方知道的情况下进行。在 JavaScript 中，你可能会在谈到网络安全性时听到 MITM，尤其是在处理如 HTTPS 这样的安全协议时。在这些情况下，JavaScript 可能会使用一些 API 或技术（例如 Service Workers）来尝试防止或检测 MITM 攻击。
自部署 MITM：
- 下载文件
- https://github.com/jimmywarting/StreamSaver.js/blob/master/mitm.html
- https://github.com/jimmywarting/StreamSaver.js/blob/master/sw.js
- 把下载的文件放入项目目录
目录： ./public
# StreamSaver.js 整合
- 安装
npm install streamsaver --save |
- 引入依赖
import * as streamSaver from 'streamsaver' |
- 下载方法封装
export async function download(url, parameters, fileName) { | |
streamSaver.mitm = 'https://xxxx/mitm.html?version=2.0.0' | |
const fileStream = streamSaver.createWriteStream(fileName) | |
return fetch(url, { | |
method: 'POST', | |
body: JSON.stringify(parameters), | |
cache: 'no-cache', | |
headers: { | |
'Content-Type': 'application/json' | |
} | |
}).then(res => { | |
const readableStream = res.body | |
if (window.WritableStream && readableStream.pipeTo) { | |
return readableStream.pipeTo(fileStream) | |
} | |
window.writer = fileStream.getWriter() | |
const reader = res.body.getReader() | |
const pump = () => reader.read() | |
.then(res => res.done | |
? window.writer.close() | |
: window.writer.write(res.value).then(pump)) | |
pump() | |
}) | |
} |
- MITM 设置
本地调试，设置中间人为 localhost 地址：
streamSaver.mitm = 'http://localhost:9527/mitm.html?version=2.0.0' |
线上设置中间人为生产地址：
streamSaver.mitm = 'https://xxxx/mitm.html?version=2.0.0' |
# 参考：
- https://juejin.cn/post/6926447267452813325
- https://github.com/jimmywarting/StreamSaver.js
- 原理解释：https://juejin.cn/post/6985883442122604574
转载：https://www.cnblogs.com/keitsi/p/17715177.html
