### 前端实现
文件流下载
在现代 Web 开发中，从前端处理后端返回的
文件流并实现
下载是一个常见的需求。以下是几种
常用的技术方案及其适用场景。
#### 使用 `
Blob` 和 `URL.createObjectURL`
当后端返回的是二进制流数据时，可以利用 JavaScript 的 `
Blob` 对象以及 `URL.createObjectURL` 方法创建临时 URL 并触发
下载行为。这种方法适用于大多数情况下需要动态生成
文件的情形。
```javascript
// 发起请求获取
文件流
fetch
('https://exa
mple.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
i
mport axios from 'axios';
const downloadFile =
(url, fileName
) => {
axios
({
method: 'GET',
url,
response
Type: '
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 请求的同时指定参数 `response
Type='
blob'` 来接收来自服务端的数据包作为二进制大对象形式存在本地缓存区等待进一步加工处理后再呈现给最终使用者查看或保存到设备当中去[^2]。
#### 处理跨域问题及其他注意事项
如果目标站点启用了 CORS 策略，则还需要确保其允许当前页面所在的源访问受保护的内容；否则可能会因为安全机制而阻止正常的交互过程发生中断现象出现错误提示信息无法继续执行后续动作直到解决完所有潜在隐患为止才能恢复正常运转状态达到预期效果满足实际应用场景下的各项指标要求标准[^3]。
---
###
https://download.csdn.net/download/miliucanhe/79845948
扫一扫
4688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
