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

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

a 标签下载‌

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

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

‌优点‌：实现简单，兼容性好（现代浏览器支持）。
‌缺点‌：仅支持同源文件下载，跨域文件需服务器设置 Access-Control-Allow-Origin 头。

window.open() 或 window.location.href

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

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

‌优点‌：支持跨域文件下载（需服务器设置 Content-Disposition 头）。
‌缺点‌：文件名由服务器决定，无法前端控制；用户体验不佳（可能导致页面跳转）。

Fetch API 或 XMLHttpRequest + Blob

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

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

‌优点‌：最灵活，支持动态生成内容、认证请求（如添加 Authorization 头）。
‌缺点‌：实现复杂度高，需处理 Blob 转换和 URL 创建。

动态表单提交

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

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

‌优点‌：兼容性好，适用于浏览器不支持 Blob 的场景。
‌缺点‌：需在 HTML 中增加额外元素，无法获取下载进度。

iframe 下载

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

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

‌优点‌：兼容性好，无需页面跳转。
‌缺点‌：需处理 iframe 加载完成事件，可能增加维护成本。

选择建议

‌同源文件‌：优先使用 或 window.open()。
‌跨域文件‌：使用 Fetch + Blob 或动态表单提交。
‌动态内容‌：推荐 Fetch + Blob 方案。
‌兼容性要求‌：优先考虑 ，其次 iframe 方案。
‌注意‌：无论哪种方式，后端需正确设置 Content-Disposition 头以指定文件名。