当前位置：首页 > JavaScript

js下载实现

2026-02-01 22:40:24JavaScript

使用原生JavaScript实现文件下载

通过创建<a>标签并设置download属性实现下载。适用于已知文件URL且同源的场景：

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);
}

处理跨域或动态内容下载

当需要下载跨域资源或动态生成的内容时，可使用fetch API获取数据后转换为Blob对象：

js下载实现

async function downloadFromUrl(url, filename) {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = URL.createObjectURL(blob);

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

  URL.revokeObjectURL(blobUrl);
}

下载文本内容

直接生成Blob对象实现文本内容下载：

js下载实现

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

  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'text.txt';
  a.click();

  URL.revokeObjectURL(url);
}

处理大文件分块下载

对于大文件下载可添加进度监控：

async function downloadWithProgress(url, filename) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  let chunks = [];

  while(true) {
    const { done, value } = await reader.read();
    if (done) break;

    chunks.push(value);
    receivedLength += value.length;
    console.log(`Downloaded ${receivedLength} of ${contentLength}`);
  }

  const blob = new Blob(chunks);
  const blobUrl = URL.createObjectURL(blob);

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

  URL.revokeObjectURL(blobUrl);
}

处理浏览器兼容性问题

针对旧版本浏览器的兼容方案：

function legacyDownload(url) {
  if (window.navigator.msSaveBlob) {
    // IE特定方法
    fetch(url).then(res => res.blob()).then(blob => {
      window.navigator.msSaveBlob(blob, 'download');
    });
  } else {
    // 标准方法
    const a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}