当前位置：首页 > JavaScript

js实现文件下载

2026-01-12 13:10:55JavaScript

使用 `a` 标签下载文件

通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。

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

通过 Blob 对象下载文本或数据

将文本或二进制数据转换为 Blob 对象并生成下载链接。

function downloadTextAsFile(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  downloadFile(url, filename);
  setTimeout(() => URL.revokeObjectURL(url), 100);
}

下载后端返回的二进制流

处理 API 返回的二进制数据（如 PDF/Excel），通常需要设置正确的响应类型。

fetch('/api/download')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    downloadFile(url, 'document.pdf');
    setTimeout(() => URL.revokeObjectURL(url), 100);
  });

处理跨域文件下载

当下载跨域资源时，可能需要将文件内容先获取到前端再生成下载。

fetch('https://example.com/file', { mode: 'cors' })
  .then(response => response.blob())
  .then(blob => {
    if (blob.size === 0) throw new Error('Empty response');
    const url = URL.createObjectURL(blob);
    downloadFile(url, 'cross-origin-file');
  });

大文件分块下载

对于大文件下载可以显示进度条，使用 Content-Length 和已接收字节数计算进度。

function downloadWithProgress(url, filename) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    xhr.onprogress = (e) => {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        console.log(`Downloaded: ${percent}%`);
      }
    };

    xhr.onload = () => {
      if (xhr.status === 200) {
        const blob = xhr.response;
        const url = URL.createObjectURL(blob);
        downloadFile(url, filename);
        resolve();
      }
    };

    xhr.send();
  });
}