当前位置：首页 > JavaScript

js实现附件下载

2026-03-01 05:52:21JavaScript

使用 `window.open` 方法

通过 window.open 直接打开文件 URL，浏览器会自动触发下载（若文件类型支持）。

window.open('https://example.com/file.pdf', '_blank');

使用 `a` 标签模拟点击

动态创建 <a> 标签，设置 download 属性并触发点击事件。

const link = document.createElement('a');
link.href = 'https://example.com/file.pdf';
link.download = 'custom-filename.pdf'; // 可选：指定下载文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

通过 `fetch` 下载二进制文件

适用于需要处理文件内容（如添加权限验证）的场景。

fetch('https://example.com/file.pdf')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.pdf';
    link.click();
    URL.revokeObjectURL(url); // 释放内存
  });

处理大文件分块下载

通过 Range 请求头实现分块下载并合并。

async function downloadLargeFile(url, filename) {
  const chunkSize = 1024 * 1024; // 1MB分块
  let startByte = 0;
  let endByte = chunkSize;
  const chunks = [];

  while (true) {
    const response = await fetch(url, {
      headers: { 'Range': `bytes=${startByte}-${endByte}` }
    });
    if (!response.ok) break;
    chunks.push(await response.blob());
    startByte = endByte + 1;
    endByte += chunkSize;
  }

  const fullBlob = new Blob(chunks);
  const link = document.createElement('a');
  link.href = URL.createObjectURL(fullBlob);
  link.download = filename;
  link.click();
}

注意事项

跨域限制：若文件在第三方域名，需确保服务器配置 CORS 头（如 Access-Control-Allow-Origin）。
文件名编码：中文文件名需使用 encodeURIComponent 处理。
Blob 类型：通过 fetch 下载时，可通过 response.headers.get('Content-Type') 确认文件类型。

示例：带权限验证的下载

fetch('https://example.com/protected-file', {
  headers: { 'Authorization': 'Bearer token123' }
})
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'secure-file.pdf';
    link.click();
  });

js实现附件下载