前端文件下载的N种姿势：从简单到高级

主要观点总结

本文主要介绍了在Web开发中实现文件下载的几种常用方法，包括使用标签的download属性、window.open()或window.location.href方式，以及使用Fetch API或XMLHttpRequest结合Blob和URL.createObjectURL()的方法。每种方法都有其适用场景和优缺点。

关键观点总结

关键观点1: 标签的download属性

最简单直接的方式，适用于下载静态资源或已知URL的文件。优点是实现简单，无需JavaScript，语义化好，兼容性好。缺点是同源限制，不适用于动态内容，无法添加自定义请求头。

关键观点2: window.open()或window.location.href方式

本质是导航到URL，可下载跨域文件。优点是实现简单，可以下载跨域文件。缺点是文件名控制后端，可能导致当前页面跳转，可能影响用户体验，无法添加自定义请求头，不适用于Blob数据。

关键观点3: 使用Fetch API或XMLHttpRequest结合Blob和URL.createObjectURL()的方式

最灵活和强大的前端下载方式，适用于需要认证、动态生成内容或处理从API获取的二进制数据。优点是完全控制，可以设置自定义请求头，处理动态数据，精确捕获和处理错误，前端生成文件等。缺点是实现相对复杂，需要处理Blob和Object URL，注意内存管理。