【前端】js 根据文件url下载到本地

在 JavaScript 中根据文件 URL 下载到本地，可以通过以下多种方法实现。这些方法适用于不同场景，如同源文件、跨域文件或动态生成内容，请根据具体需求选择：

一、使用 <a> 标签的 download 属性（简单场景）

通过动态创建 <a> 标签并设置 download 属性，触发点击事件直接下载文件。
适用场景：同源 URL 或支持 CORS 的跨域文件，且无需动态生成内容。

function downloadByATag(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename || 'default-name'; // 设置下载文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

注意：

• 跨域文件需服务器配置 CORS 响应头。
• 若服务器响应头包含 Content-Disposition，则以服务器返回的文件名为准。

二、通过 Fetch API + Blob（动态内容或跨域控制）

通过 Fetch 获取文件二进制数据，转为 Blob 后生成临时 URL 触发下载。
适用场景：需动态处理文件内容、跨域请求或添加权限校验逻辑。

async function fetchAndDownload(url, filename) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const downloadUrl = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = filename || 'file';
    a.click();
    
    URL.revokeObjectURL(downloadUrl); // 释放内存
  } catch (error) {
    console.error('下载失败:', error);
  }
}

优点：

• 支持动态生成文件名和文件类型（如 CSV、JSON）。
• 可添加请求头实现权限校验。

三、使用 Form 表单提交（兼容旧浏览器）

通过动态创建 <form> 提交请求，适用于需要兼容旧浏览器或 POST 请求的场景。

function downloadByForm(url) {
  const form = document.createElement('form');
  form.method = 'GET';
  form.action = url;
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
}

缺点：用户体验较差（可能跳转新页面）。

四、特殊场景处理

1. 大文件下载
   直接使用 <a> 标签而非 Blob，避免内存占用过高（Blob 有大小限制，如 Chrome 限制 500MB）。
2. 浏览器兼容性
   • Safari 需确保服务器返回正确的 MIME 类型。
   • IE/Edge 可能需要 window.open 或 execCommand('SaveAs')。

五、注意事项

1. 内存泄漏：使用 URL.createObjectURL() 后务必调用 revokeObjectURL()。
2. 用户体验：下载大文件时建议显示进度条（可通过 response.body 分块读取）。
3. 跨域问题：确保服务器配置 Access-Control-Allow-Origin，否则 Fetch 请求可能被拦截。

示例代码整合

// 综合方案（推荐）
async function downloadFile(url, filename) {
  if (url.startsWith('http') && !url.startsWith(window.location.origin)) {
    // 跨域文件使用 Fetch
    await fetchAndDownload(url, filename);
  } else {
    // 同源文件直接下载
    downloadByATag(url, filename);
  }
}

通过上述方法，可覆盖大多数下载需求。具体实现时需结合服务器配置和浏览器兼容性调整策略。