当前位置：首页 > JavaScript

js实现主动下载

2026-03-15 21:07:29JavaScript

使用 `window.open` 方法

通过 window.open 直接打开文件 URL，浏览器会自动触发下载（若文件类型支持）。适用于简单场景，但可能被浏览器拦截。

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

使用 `a` 标签模拟点击

动态创建隐藏的 <a> 标签，设置 download 属性并触发点击事件。兼容性较好，适合大多数文件类型。

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

// 调用示例
downloadFile('https://example.com/image.png', 'myImage.png');

使用 Fetch API 处理二进制数据

适用于需要先获取文件内容再下载的场景（如需要添加请求头）。需注意跨域问题。

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

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

  // 清理对象URL
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl);
  }, 100);
}

// 调用示例
fetchAndDownload('https://example.com/data.csv', 'report.csv');

处理 Base64 数据

直接下载 Base64 编码的文件（如图片或 PDF）。

js实现主动下载

function downloadBase64(content, filename, mimeType) {
  const byteCharacters = atob(content);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], { type: mimeType });

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

// 调用示例（假设有Base64数据）
const pdfBase64 = 'JVBERi0xLjMK...'; // 截断的Base64示例
downloadBase64(pdfBase64, 'document.pdf', 'application/pdf');