猹猹猹中堂做前端开发的这几年，我发现自己跟“下载”这个功能的缘分很深。小到导出一份Excel报表，大到打包一批图片、下载一套离线文档，几乎每个业务系统都躲不开这个需求。但恰恰是这种看着很简单的功能，最容易在线上翻车：要么文件名变成一串乱码，要么点击之后毫无反应，要么大文件下到一半直接卡死。也有不少读者问我，面试时总被问到“前端有哪几种下载方式”，该怎么答才能显得有水平。这篇文章我打算系统地把前端下载的几种方法、底层原理、实际代码和踩坑经验全部梳理一遍，给大家一份真正可以照着用的参考。
这个内容适合谁？如果你是刚入行、想弄懂下载功能背后机制的前端新人，可以按顺序从头读到尾；如果你是有一定经验、想查漏补缺或备战面试的开发者，可以直接跳到第三、四节看文件流下载和大文件处理；如果你今天只是线上出了个下载bug，想去目录里找排查思路，那么第五、六节可以直接用。我会用偏实战的口吻来讲，代码都是能跑的那种，不是画饼。
1. 先想清楚：前端下载到底在解决什么问题
1.1 浏览器的“默认下载”和前端能干预的部分
很多人一上来就写代码，但我觉得第一步应该先把问题定义清楚。浏览器天然就支持下载：只要用户点击一个指向资源的链接，或者直接在地址栏输入一个文件的URL，浏览器就会根据响应头里的Content-Disposition和Content-Type决定是直接展示还是下载到本地。这是浏览器的默认行为，完全不需要前端做什么。
那为什么还需要前端去“实现下载”？因为默认行为太死板了。你没法控制文件名，没法在下载前做权限校验，没法监控进度，没法断点续传，更没法在下载过程中给用户呈现一个友好的交互状态。换句话说，前端下载方案的本质，是想办法利用或绕过浏览器的默认行为，去满足业务场景的定制化需求。
我习惯把前端能控制的环节拆成三部分：触发方式（用户点击什么、怎么触发下载）、文件来源（直链、接口返回的二进制流、还是前端本地生成的内容）、下载后的反馈（成功提示、失败提示、进度展示）。后面讲到的方法，本质上都是在这三个环节上做组合和取舍。你把这个框架记在心里，面试时不管被问到哪一类下载，都能先说出它解决了哪一环节的问题，再讲具体实现。
1.2 为什么不能只靠一种下载方案
我见过不少项目，自始至终只用一种下载方式：要么全部用window.open，要么全部用a标签直链。短期看着没啥问题，等业务复杂度上来就顶不住了。
举个实际例子：用户要下载一份后台生成的报表，这个报表是接口动态生成的，URL不固定，而且接口要求带登录后的token。你直接用a标签指向一个带token的URL，很可能会因为跨域问题被浏览器拦截；如果接口返回的是二进制流、需要前端把流转成文件，那location.href也完全无能为力。再比如下载一个几十MB的安装包，你要给用户展示进度条，还用那种“点击即跳转”的原始方式，就只能看着浏览器自己的下载列表发呆，根本拿不到任何中间状态。
所以说，“前端下载的方法解释”本质上是一套按场景选型的方案清单，而不是某一段固定代码。大概的选型逻辑是这样的：静态文件直链优先用a标签，接口返回流用Blob加URL.createObjectURL，大文件要监控进度的用XMLHttpRequest或fetch加流式读取，需要断点续传的还要配合Range请求头和服务端联调。把这套逻辑想明白，比背十个下载代码片段都管用。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 最朴素的方案：a标签、location.href、window.open
2.1 a标签和download属性
前端下载里最基础、日常也最常用的就是a标签。正常情况下，一个<a>标签指向一个图片、PDF或压缩包地址时，浏览器会直接打开预览或跳转到对应页面，并不会触发下载。想强制让浏览器下载，关键在download属性。
html复制<a href="/files/2026/summary.pdf" download>下载年度总结</a>
加了download属性之后，浏览器会尝试把目标资源保存为本地文件。这里有个很重要的细节：download属性的值可以自定义文件名，比如download="2026年度总结.pdf"，这个值会覆盖服务端返回的文件名。但这种覆盖是有条件的，只有同源URL才能生效，跨域资源时download属性会被浏览器忽略，文件名以服务端Content-Disposition为准。这种限制不是bug，是浏览器出于安全考虑的设计：如果允许跨域页面随意给文件起名，很容易诱导用户下载并打开伪装成合法文件名的恶意内容。
实操里还有一个常见场景是点击按钮触发下载，而不是点击链接。很多人会用JavaScript模拟点击，但直接给按钮绑window.location.href会发现没法设置download属性。正确做法是在事件回调里动态创建a元素：
javascript复制function downloadByUrl(url, filename) {
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
这里有两个细节值得说明。第一，一定要把a元素挂到document.body上，否则在部分浏览器（尤其老版本Safari）里click()不生效；第二，点击之后要立即移除这个元素，一方面避免 DOM 冗余节点堆积，另一方面也是防止同一元素在后续交互中被误触发。我在项目里见过有人用display: none把元素隐藏起来、但一直不释放，时间长了页面上堆一堆废弃的下载节点，虽然不至于出大事，但代码review时总会被人挑毛病。
2.2 跳转式下载：location和window.open
如果不想用a标签，有时也会看到window.location.href = url或window.open(url)的方式。这种方式适合直接交给浏览器去处理下载场景，前提是服务端在响应头里已经设置了Content-Disposition: attachment。因为此时浏览器拿到响应头，就知道这是一个需要下载的文件，而不是一个需要跳转的页面。
它们的区别在于打开位置：location.href是在当前页面完成跳转/触发下载，会中断当前页面上的JS执行环境（如果是下载，当前页面不会真的跳走，但有些浏览器会闪一下）；window.open会打开一个新标签页或新窗口去发起请求。如果这个新窗口最终响应的是一个下载头，那么标签页会自动关闭，用户基本感