vue 导出 不返文件流

### 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]。 ---