当前位置：首页 > JavaScript

js下载功能实现

2026-04-03 23:51:12JavaScript

使用`<a>`标签下载

通过创建带有download属性的<a>标签实现文件下载，适用于已知文件URL或Blob数据：

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

通过Blob对象下载

处理动态生成的内容时，可将其转换为Blob后下载：

js下载功能实现

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

使用Fetch API下载

从远程服务器获取文件时，通过Fetch API处理跨域和认证问题：

js下载功能实现

const fetchAndDownload = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const objectUrl = URL.createObjectURL(blob);
  downloadFile(objectUrl, filename);
  setTimeout(() => URL.revokeObjectURL(objectUrl), 100);
};

大文件分块下载

处理大文件时可使用流式下载避免内存溢出：

const downloadLargeFile = async (url, filename) => {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const chunks = [];

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

  const blob = new Blob(chunks);
  downloadFile(URL.createObjectURL(blob), filename);
};

进度显示实现

添加下载进度监控功能：

const downloadWithProgress = (url, filename) => {
  return new Promise((resolve) => {
    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(`下载进度: ${percent}%`);
      }
    };

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

    xhr.send();
  });
};