前端接收文件流下载到本地

### 前端实现文件流下载 在现代 Web 开发中，从前端处理后端返回的文件流并实现下载是一个常见的需求。以下是几种常用的技术方案及其适用场景。 #### 使用 `Blob` 和 `URL.createObjectURL` 当后端返回的是二进制流数据时，可以利用 JavaScript 的 `Blob` 对象以及 `URL.createObjectURL` 方法创建临时 URL 并触发下载行为。这种方法适用于大多数情况下需要动态生成文件的情形。 ```javascript // 发起请求获取文件流 fetch('https://example.com/api/download') .then(response => { if (!response.ok) throw new Error('Network response was not ok'); return response.blob(); // 将响应体转换为 Blob 数据 }) .then(blobData => { const url = window.URL.createObjectURL(blobData); // 创建对象 URL const aTag = document.createElement('a'); // 动态创建 <a> 标签 aTag.style.display = 'none'; aTag.href = url; aTag.download = 'filename.ext'; // 设置下载后的文件名 document.body.appendChild(aTag); aTag.click(); // 自动点击触发下载 window.URL.revokeObjectURL(url); // 释放对象 URL 占用的内存资源 document.body.removeChild(aTag); }) .catch(error => console.error('There was a problem with the fetch operation:', error)); ``` 此方法的优点在于它能够很好地兼容各种类型的文件，并且不会污染全局命名空间[^1]。 #### 利用第三方库简化操作流程 对于更复杂的业务逻辑或者希望减少重复编码的工作量来说，引入一些成熟的工具类库会更加高效便捷。例如基于 Axios 扩展封装而成的支持文件流下载功能插件——`axios-download-progress` 或者直接调用 Ant Design 提供的相关 API 来完成类似的任务。 ```javascript import axios from 'axios'; const downloadFile = (url, fileName) => { axios({ method: 'GET', url, responseType: 'blob' }).then((res) => { const link = document.createElement('a'); link.href = window.URL.createObjectURL(new Blob([res.data])); link.setAttribute('download', fileName || 'unknown-file-name'); document.body.appendChild(link); link.click(); link.remove(); }); }; // 调用示例 downloadFile(`${httpUrl}/tag/export`, 'exported-list.csv')[^4]; ``` 上述代码片段展示了如何借助 Axios 库发起 GET 请求的同时指定参数 `responseType='blob'` 来接收来自服务端的数据包作为二进制大对象形式存在本地缓存区等待进一步加工处理后再呈现给最终使用者查看或保存到设备当中去[^2]。 #### 处理跨域问题及其他注意事项 如果目标站点启用了 CORS 策略，则还需要确保其允许当前页面所在的源访问受保护的内容；否则可能会因为安全机制而阻止正常的交互过程发生中断现象出现错误提示信息无法继续执行后续动作直到解决完所有潜在隐患为止才能恢复正常运转状态达到预期效果满足实际应用场景下的各项指标要求标准[^3]。 --- ###