StreamSaver.js入门教程：优雅解决前端下载文件的难题

theme: smartblue

本文简介

本文介绍一个能让前端优雅下载大文件的工具：StreamSaver.js

• ⚡️ StreamSaver.js GitHub地址
• ⚡️ 官方案例

StreamSaver.js 可用于实现在Web浏览器中直接将大文件流式传输到用户设备的功能。

传统的下载方式可能导致大文件的加载时间较长或造成内存占用过大的问题，使用 <a> 标签打开新页面下载文件，遇到 .txt 或者 .mp4 之类的文件可能就直接在页面展示了，不会触发下载功能。而 StreamSaver.js 则通过流式下载的方式解决了这些问题。

StreamSaver.js 将大文件拆分成小块，并在下载过程中逐块传输到硬盘，从而降低内存占用和提高下载速度。

环境准备

要学习 StreamSaver.js 首先要准备一份或者多份可下载的文件。

你可以使用网络上的文件资源，但这需要你自己去找。

你也可以在自己的电脑运行个服务，把文件资源丢进去即可。

如果你用脚手架创建项目，比如vue或者react之类的项目，也可以把文件放在静态资源目录里。

比如用 vite 创建一个 Vue 项目，然后在 public<