文件下载

same::

文件下载两种方式

• father::常见的前端业务需求
• 高级

文件下载两种方式（浏览器端）

要点：

• 方式一（a 标签触发浏览器下载）：让浏览器直接请求下载接口，无法自定义请求头，认证信息需放在 URL 查询参数中。
• 方式二（内存拉取再触发下载）：先在浏览器内存拉取完整文件（如 fetch/XHR + Blob），再用 URL.createObjectURL 交由浏览器下载，可完全自控请求头与鉴权。

方式一：a 标签 + 模拟点击

• 通过创建隐藏的 a 元素，设置 href 指向下载接口，并触发 click。
• 适合公开资源或只能用 URL 携带鉴权场景。
• 局限：无法自定义请求头；URL 可能暴露敏感参数（需注意过期与最小权限）。

示例（思路）：

const a = document.createElement('a');
a.href = downloadUrlWithToken; // 将 token 等认证信息放在查询参数
a.download = filename;
document.body.appendChild(a);
a.click();
a.remove();

方式二：先拉取再触发下载

• 通过 fetch/XHR 携带自定义请求头（如 Authorization），拿到 ArrayBuffer/Blob，再交给浏览器下载。
• 优点：可控鉴权与头部、可做错误处理与重试、可支持断点续传策略。

示例（思路）：

const res = await fetch(api, { headers: { Authorization: token } });
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);

指向原始笔记的链接