前端下载文件的几种方式
阶段性总结一下前端可以用于文件下载的几种方法
1. a[href=*] 右键另存为
最原始的方式之一，在很多远古的网站上会存在，一般需要搭配后端对文件请求的 reponseHeader 设置 Content-Disposition ，否则用户直接点击的话可能会打开预览而不是文件下载。
如果服务器实现了 Content-Disposition 的话，前端也可以使用这些方式直接去打开对应的url：
- location.href
- window.open
- iframe[src]
- a[href].click
2. a[download='filename'] 使用 download 属性
现代 HTML5 规范提供了一种直接在链接声明文件可下载的方式，使用 a 标签的 download 属性，属性值将会作为下载文件的文件名，使用这个方法，结合 ObjectUrl，首次将前端生成文件并直接在网页上触发下载变成了可能。
在这个API的基础上终于能够做到直接在前端生成并下载 文本文件、excel 等文件，而无需后端服务参与。
上述两种方式都有一个比较基础和典型的实现：https://github.com/eligrey/FileSaver.js
3. ServiceWorker
ServiceWorker 对于全局请求的劫持，结合 Stream API， 使前端流式创建/下载文件变成了可能，在前端技术栈上可以做到流式下载一个超大文件，例如几个 G 大小的视频。
一个比较经典的实现来自: https://github.com/jimmywarting/StreamSaver.js
4. showSaveFilePicker
Chrome>86 的才可以使用的一个API，同样可以用于保存文件，属于 浏览器 FileSystemApi 的一部分，同样可以流式写入，缺点是不会产生浏览器原生的下载进度和记录，需要自己实现下载进度的相关交互界面。