js实现浏览器下载文件

使用 a 标签下载文件

通过创建 a 标签并设置 download 属性实现下载。适用于已知文件 URL 且无需额外处理的情况。

const downloadFile = (url, filename) => {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'downloaded-file';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

使用 fetch 和 Blob 下载

适用于需要动态获取文件内容（如 API 返回的二进制数据）的场景。

const downloadFromApi = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = window.URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = blobUrl;
  a.download = filename || 'downloaded-file';
  document.body.appendChild(a);
  a.click();

  window.URL.revokeObjectURL(blobUrl);
  document.body.removeChild(a);
};

下载文本内容

直接通过 Blob 将文本内容转为文件下载。

const downloadText = (content, filename) => {
  const blob = new Blob([content], { type: 'text/plain' });
  const blobUrl = window.URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = blobUrl;
  a.download = filename || 'text-file.txt';
  document.body.appendChild(a);
  a.click();

  window.URL.revokeObjectURL(blobUrl);
  document.body.removeChild(a);
};

处理跨域问题

若文件资源跨域且服务器未设置 CORS 头，需通过代理或后端中转下载。

// 后端示例（Node.js Express）
app.get('/download-proxy', async (req, res) => {
  const { url } = req.query;
  const response = await axios.get(url, { responseType: 'stream' });
  response.data.pipe(res);
});

// 前端调用
downloadFile('/download-proxy?url=' + encodeURIComponent(fileUrl));

注意事项

• download 属性受同源策略限制，跨域文件可能触发浏览器默认行为（如预览而非下载）。
• 大文件下载建议使用分块或流式处理，避免内存问题。
• 部分浏览器可能限制 Blob URL 的有效期，需及时调用 revokeObjectURL 释放资源。