在前端开发中,文件下载是极其常见的需求。从简单的图片下载到大型文件处理,从静态资源到动态接口数据,不同场景需要不同的实现方案。
本文将全面总结前端文件下载的各种实现方式,包括基础方案、进阶方案和高级方案,并给出完整的代码示例,帮助你根据具体场景选择最适合的实现方式。
# 一、基础下载方案
# 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
处理接口返回的二进制数据,灵活控制下载行为。