前端从服务端下载文件的几种方式

前端从服务端下载文件主要有以下几种方式，每种方式适用场景和优缺点如下：

a 标签下载‌

‌实现方式‌：通过标签的 download 属性指定下载文件名。

‌示例代码‌：

html 复制代码

<a href="http://example.com/download" download="filename.ext">下载

‌优点‌：实现简单，兼容性好（现代浏览器支持）。

‌缺点‌：仅支持同源文件下载，跨域文件需服务器设置 Access-Control-Allow-Origin 头。

window.open() 或 window.location.href

实现方式‌：通过 window.open() 或 window.location.href 导航到文件下载链接。

‌示例代码‌：

javascript 复制代码

window.open('http://example.com/download', '_blank');

‌优点‌：支持跨域文件下载（需服务器设置 Content-Disposition 头）。

‌缺点‌：文件名由服务器决定，无法前端控制；用户体验不佳（可能导致页面跳转）。

Fetch API 或 XMLHttpRequest + Blob

实现方式‌：通过 Fetch 或 XHR 获取文件流，转换为 Blob 对象并创建下载链接。

‌示例代码‌：

javascript 复制代码

fetch('http://example.com/download')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext';
    link.click();
  });

‌优点‌：最灵活，支持动态生成内容、认证请求（如添加 Authorization 头）。

‌缺点‌：实现复杂度高，需处理 Blob 转换和 URL 创建。

动态表单提交

实现方式‌：通过动态生成元素提交请求。

‌示例代码‌：

javascript 复制代码

const form = document.createElement('form');
form.action = 'http://example.com/download';
form.method = 'POST';
document.body.appendChild(form);
form.submit();

‌优点‌：兼容性好，适用于浏览器不支持 Blob 的场景。

‌缺点‌：需在 HTML 中增加额外元素，无法获取下载进度。

iframe 下载

实现方式‌：通过动态生成元素加载下载链接。

‌示例代码‌：

javascript 复制代码

const iframe = document.createElement('iframe');
iframe.src = 'http://example.com/download';
document.body.appendChild(iframe);

‌优点‌：兼容性好，无需页面跳转。

‌缺点‌：需处理 iframe 加载完成事件，可能增加维护成本。

选择建议

‌同源文件‌：优先使用或 window.open()。

‌跨域文件‌：使用 Fetch + Blob 或动态表单提交。

‌动态内容‌：推荐 Fetch + Blob 方案。

‌兼容性要求‌：优先考虑，其次 iframe 方案。

‌注意‌：无论哪种方式，后端需正确设置 Content-Disposition 头以指定文件名。