StreamSaver.js实现大文件下载

发表于 2024-07-26 更新于 2024-11-21 本文字数： 768 阅读时长 ≈ 1 分钟

本文是作者对StreamSaver.js实现大文件下载的介绍，包括StreamSaver.js实现大文件下载的优势、实现细节、相关资料等，这些步骤可以帮助作者提高StreamSaver.js实现大文件下载的效率。

浏览器侧文件下载如果简单的blob对象，然后调用URL.createObjectURL(blob)方法，会直接下载文件。但是坏处是无法支持大文件下载。在不改变后端的基础上如何解决呢。streamSaver.js就是为了解决这个问题而诞生的。

原理

streamSaver.js利用serviceworker来实现请求拦截，而请求如果结果是stream则可以直接持续写入浏览器侧本地，这样就可以打破JS单线程限制，无法下载大文件及阻塞线程。

使用

import streamSaver from 'streamsaver';

streamSaver.mitm = 'https://example.com/custom_mitm.html'

const fileStream = streamSaver.createWriteStream('hello.mkv', { size: 10_000_000 });
const fileWriter = fileStream.getWriter();

fileWriter.write(new Uint8Array(chunk));

fileWriter.close();