HTML创建下载链接教程

本文详解了在HTML中实现文件强制下载的多种技术方案与实战要点：针对同源资源可直接使用a标签的download属性，但该属性在跨域和iOS Safari中完全失效；跨域场景下推荐采用fetch结合Blob API的通用方案，需注意设置mode: 'cors'、妥善处理大文件内存占用及iOS的手势触发限制；而最稳定高效的方案其实是后端配合，在响应头中设置Content-Disposition: attachment并规范处理中文文件名，可彻底规避前端兼容性问题。无论选择哪种方式，都需根据实际环境（是否可控后端、目标浏览器、文件大小）权衡取舍，避免踩坑。

怎么让 标签触发文件下载而不是跳转

• 同源时直接写：下载PDF
• 跨域资源（比如 CDN 上的文件）不能用 download，得走 JS 触发下载逻辑
• download 的值是建议保存的文件名，浏览器可能忽略它（尤其当响应头里有 Content-Disposition）

用 fetch + Blob 下载跨域文件（最通用方案）

这是目前兼容性好、可控性强的做法：先请求资源拿到二进制流，再构造 Blob URL 触发下载。关键点在于 response.arrayBuffer() 或 response.blob() 必须显式调用，否则无法生成可下载的本地 URL。

• 必须设置 mode: 'cors'，否则跨域请求直接失败
• 如果后端没配 Access-Control-Allow-Origin，前端 fetch 会报 TypeError: Failed to fetch
• 大文件慎用，Blob 会暂存内存，可能卡顿；小文件（
• 示例代码片段：

const downloadFile = async (url, filename) => {
  try {
    const res = await fetch(url, { mode: 'cors' });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const blob = await res.blob();
    const blobUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(blobUrl);
  } catch (err) {
    console.error('下载失败:', err.message);
  }
};

Content-Disposition 响应头比前端 JS 更可靠

如果你能控制后端，这是最省事也最稳的方式：服务端在返回文件时带上 Content-Disposition: attachment; filename="xxx.pdf"，浏览器看到这个头就会自动弹保存框，完全绕过前端逻辑和同源限制。

• 注意 filename 值要用 filename*=UTF-8''xxx.pdf 格式处理中文，否则可能乱码或截断
• Nginx 静态文件服务需加配置：add_header Content-Disposition "attachment";
• Node.js（Express）示例：res.setHeader('Content-Disposition', 'attachment; filename="data.csv"');
• 这个头对所有请求都生效，包括直接地址栏输入 URL，适合公开下载入口

移动端 Safari 的 download 属性几乎无效

iOS/iPadOS 的 Safari 不支持 （无论同源与否），点击只会打开预览页。唯一可靠路径就是 fetch + Blob + URL.createObjectURL，但要注意：必须是用户手势触发（如 click 事件内），否则 createObjectURL 可能被静默拒绝。