在前端开发中，文件下载是极其常见的需求。从简单的图片下载到大型文件处理，从静态资源到动态接口数据，不同场景需要不同的实现方案。
本文将全面总结前端文件下载的各种实现方式，包括基础方案、进阶方案和高级方案，并给出完整的代码示例，帮助你根据具体场景选择最适合的实现方式。
# 一、基础下载方案
# 1. a标签下载
最简单直接的下载方式，适合静态资源或可直接访问的URL。
// 基础下载 - 触发浏览器默认行为
const link = document.createElement('a')
link.href = 'https://example.com/file.pdf'
link.click()
// 带下载文件名 - 使用download属性
const link = document.createElement('a')
link.href = 'https://example.com/file.pdf'
link.download = '自定义文件名.pdf' // 告诉浏览器触发下载
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
// 注意事项：download属性有跨域限制
// 仅适用于同源URL或 blob:、data: URL
@前端进阶之旅: 代码已经复制到剪贴板
适用场景：同源静态文件下载、可控服务器资源
# 2. location.href 跳转
最简单的下载方式，浏览器会直接打开或下载目标资源。
// 直接跳转下载
location.href = 'https://example.com/file.pdf'
// 优点：简单直接
// 缺点：会跳转当前页面，无法获取下载进度
@前端进阶之旅: 代码已经复制到剪贴板
适用场景：不关心下载状态、一次性下载
# 3. window.open 打开
通过新窗口打开资源，适合浏览器直接支持预览的文件类型。
// 新窗口打开下载
window.open('https://example.com/file.pdf', '_blank')
// 适用于PDF、图片等浏览器可直接预览的文件
@前端进阶之旅: 代码已经复制到剪贴板
适用场景：需要浏览器预览的文件、需要在新标签页查看
# 二、Blob文件下载
# 4. fetch + Blob
处理接口返回的二进制数据，灵活控制下载行为。
