不能直接用 因为浏览器限制 download 属性仅对同源 url 生效，跨域或 cdn 文件会失效；且服务端未设置 content-disposition: attachment 时可能预览而非下载。
为什么不能直接用 <a href="file.pdf" download></a>？
浏览器对 download 属性有严格限制：只允许同源 URL（即和当前页面协议、域名、端口完全一致）触发下载。如果文件在 CDN、对象存储（如 OSS、S3）或跨域接口返回，download 会静默失效，点击后直接跳转或打开，而非下载。
更关键的是，服务端未设 Content-Disposition: attachment 时，浏览器可能根据 MIME 类型决定是预览还是下载（比如 PDF、TXT 在 Chrome 里常被内嵌打开）。
安全下载的核心：服务端控制 + 客户端兜底 真正可控的方式是让服务端返回带正确响应头的文件流，并确保前端不暴露原始 URL 给用户（避免被爬取或越权访问）。客户端只需发起一次请求，由服务端决定是否允许下载、返回什么文件名、是否强制下载。
实操建议：
- 后端接口（如
/api/download?id=123）需校验权限、记录日志，并设置：Content-Disposition: attachment; filename="report.pdf" - 响应头必须包含
Content-Type: application/octet-stream（或真实 MIME，但避免text/plain等易被渲染的类型） - 前端用
fetch获取 blob，再用URL.createObjectURL()创建临时链接下载，避免暴露原始路径 - 不要把敏感文件路径拼在 URL 里（如
?path=/var/www/secret.pdf），全部交由后端解析和校验
前端安全下载的最小可行代码
以下代码适用于已通过权限校验的接口（如 JWT 鉴权后的 /api/download?file_id=abc），不会暴露原始 URL，且兼容主流浏览器：
async function safeDownload(fileId) {
try {
const res = await fetch(`/api/download?file_id=${fileId}`, {
headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const filename = getFilenameFromHeaders(res); // 见下文
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename || 'download';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} catch (err) {
console.error('下载失败:', err.message);
}
}
// 从 Content-Disposition 提取 filename（需后端返回）
function getFilenameFromHeaders(res) {
const disposition = res.headers.get('Content-Disposition');
if (disposition && disposition.indexOf('filename=') !== -1) {
return decodeURIComponent(
disposition.match(/filename[^;=\n]*=([^;]*)/)[1].trim().replace(/"/g, '')
);
}
return null;
}
注意：getFilenameFromHeaders 依赖服务端在 Content-Disposition 中明确写入 filename="xxx.pdf" —— 这是唯一可靠获取原始文件名的方式。前端猜扩展名（如靠 URL 后缀）既不安全也不准确。
容易被忽略的坑：Blob URL 内存泄漏与 CORS
每次调用 URL.createObjectURL(blob) 都会创建一个内存引用，不手动 revoke 可能堆积大量 Blob 对象，尤其在频繁下载场景下引发内存增长。
CORS 问题常被误判为“下载失败”：如果接口没配 Access-Control-Expose-Headers: Content-Disposition，前端就拿不到 Content-Disposition 头，导致无法提取文件名 —— 但下载本身仍可能成功（只是用默认名）。
真正要检查的不是“能不能下”，而是“下下来的文件名对不对、内容完不完整”。用 res.blob().then(b => console.log(b.size)) 验证响应体是否非空，比单纯看 res.ok 更靠谱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
