DEV Community
·
压缩下载乐趣 🤐 - 在客户端浏览器中下载多个文件并压缩
💡
原文英文，约1700词，阅读约需6分钟。
📝
内容提要
本文介绍了一种无需后端支持的浏览器文件压缩和下载方法。利用File System Access API，用户可以在本地创建zip文件，从而降低基础设施成本并提升用户体验。尽管该方法依赖现代浏览器，但避免了服务器端压缩的复杂性和费用。
🎯
关键要点
- 介绍了一种无需后端支持的浏览器文件压缩和下载方法。
- 利用File System Access API，用户可以在本地创建zip文件。
- 该方法降低了基础设施成本并提升了用户体验。
- 传统方法需要设置后端API，涉及多个步骤和费用。
- 客户端压缩的优点包括节省基础设施成本和提供更好的用户反馈。
- 客户端压缩的缺点包括浏览器兼容性和文件可用性问题。
- 使用Zip.js库可以高效地处理文件压缩。
- 通过showSaveFilePicker获取可写文件句柄以保存zip内容。
- 设置zip归档时需考虑内存使用和处理速度。
- 通过HttpRangeReader逐个添加文件到zip归档中，避免内存过载。
- 确保在完成后正确关闭zip归档，以生成有效的zip文件。
❓
延伸问答
如何在浏览器中实现文件压缩和下载？
可以利用File System Access API在浏览器中创建zip文件，用户无需后端支持即可下载多个文件。
客户端压缩文件有哪些优缺点？
优点包括节省基础设施成本、无需服务器端压缩和提供更好的用户反馈；缺点是浏览器兼容性和文件可用性问题。
使用Zip.js库有什么好处？
Zip.js可以高效处理文件压缩，支持流式处理，降低内存消耗，避免浏览器崩溃。
如何确保生成有效的zip文件？
在完成压缩后，必须调用zipWriter.close()以确保所有数据正确写入，避免文件损坏。
如何处理文件下载进度反馈？
可以在添加文件到zip归档时，通过onprogress回调函数实时更新下载进度，提供用户反馈。
如何检查浏览器是否支持showSaveFilePicker？
可以通过检查typeof window['showSaveFilePicker']是否为'function'来判断浏览器是否支持该功能。
➡️
