当前位置：首页 > JavaScript

js实现页面下载

2026-04-07 12:05:16JavaScript

使用`<a>`标签下载文件

通过创建带有download属性的<a>标签实现文件下载。适用于已知文件URL的情况：

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

使用Blob对象下载动态内容

将文本或数据转换为Blob对象实现下载，适用于需要动态生成文件内容的场景：

js实现页面下载

const downloadText = (content, filename, mimeType = 'text/plain') => {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'file.txt';
  document.body.appendChild(link);
  link.click();
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 0);
};

下载Canvas内容

将Canvas元素内容导出为图片文件：

js实现页面下载

const downloadCanvas = (canvas, filename = 'image.png') => {
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvas.toDataURL('image/png');
  link.click();
};

处理大文件分块下载

使用Streams API处理大文件下载，避免内存问题：

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

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

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

添加下载进度显示

为文件下载添加进度提示：

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

    xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        const percent = Math.round((event.loaded / event.total) * 100);
        console.log(`下载进度: ${percent}%`);
      }
    };

    xhr.onload = () => {
      if (xhr.status === 200) {
        const blob = xhr.response;
        const downloadUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = filename;
        link.click();
        resolve();
      }
    };

    xhr.onerror = () => reject(new Error('下载失败'));
    xhr.send();
  });
}