### Vue
项目中
导出功能不返回
文件流的解决方案
对于 Vue
项目中的
导出功能遇到无法正常接收
文件流并完成
文件保存的情况，可以采取以下措施来解决问题。
#### 修改 Axios 请求配置以支持二进制
数据响应
确保用于发起 HTTP 请求的库（如 axios）被正确设置以便能够处理来自服务器的二进制
数据。具体来说，应该调整 `axios` 的请求头以及设定合适的 `responseType` 参数为 `'blob'` 或者 `'arraybuffer'` 来指示预期接收到的是
文件流而非普通的 JSON
数据[^1]。
```javascript
import axios from 'axios';
const exportFile = async () => {
try {
const response = await axios({
url: '/api/export', // 替换成实际接口地址
method: 'GET',
responseType: 'blob', // 关键点：指定响应类型为 blob
});
// 创建隐藏的<a>标签触发浏览器下载行为
const link = document.createElement('a');
let filename = "exported_file.xlsx"; // 可自定义
文件名
if (response.headers['content-disposition']) {
const contentDisposition = response.headers['content-disposition'];
const result = /filename=([^;]+)/.exec(contentDisposition);
if(result && result.length > 0){
filename = decodeURIComponent(result[1]);
}
}
link.href = URL.createObjectURL(response.data);
link.download = filename;
link.click();
setTimeout(() => { // 清理临时创建的对象url
window.URL.revokeObjectURL(link.href);
}, 100);
} catch (error) {
console.error(error.message || error.toString());
}
};
```
#### 处理
Mock.js 对 XMLHttpRequest 的干扰
如果应用中有使用到
Mock.js 进行 API 模拟，则需要注意其可能会
影响原生 XHR 行为，默认情况下可能会改变 `responseType` 属性值为空字符串 (`''`) ，从而
影响文件流的解析。针对此问题可以通过修改
mock.js 中的相关逻辑或者禁用对特定路由的
影响来规避这个问题[^3]。
#### 调整后端服务端设置
有时即使
前端做了相应改动仍然无法获取正确的
文件流，这可能是由于后端未按照标准方式发送
文件所致。确认后端是否设置了恰当的内容类型(Content-Type)，比如对于 Excel
文件应设为 `"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"` 并且包含了 Content-Disposition 字段指明附件名称等信息[^2]。
#### 应对中文字符编码问题
为了避免因编码差异而导致的乱码现象发生，在构建 Blob 对象之前先尝试转换成 UTF-8 编码格式再传递给客户端进行存储操作[^4]。
---
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
564
