### 前端实现导出后端返回的 `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` 文件 为了实现在前端从后端获取并下载 Excel 文件，确保前后端配置一致非常重要。当遇到文件无法正常打开或提示损坏的情况时，通常是因为 Content-Type 或响应头设置不当所致。 #### 设置正确的 HTTP 请求头 在发起请求之前，确认服务器已经设置了合适的 MIME 类型作为响应的内容类型： ```http Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ``` 这表明客户端期望接收的是 Office Open XML 格式的电子表格文档[^1]。 #### 使用 JavaScript 实现文件下载功能 下面是一个简单的例子展示如何利用 Fetch API 来处理来自服务器的二进制数据，并触发浏览器中的文件下载行为： ```javascript async function downloadExcelFile() { const url = 'https://example.com/api/export'; // 后端接口地址 try { let response = await fetch(url, { method: "GET", headers: new Headers({ Accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), responseType: 'blob' // 指定响应体为Blob对象 }); if (!response.ok) throw Error('Network response was not ok'); const blob = await response.blob(); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = "exported_file.xlsx"; // 下载后的文件名 document.body.appendChild(link); // Firefox 需要此操作才能工作 link.click(); setTimeout(() => { URL.revokeObjectURL(link.href); document.body.removeChild(link); }, 0); } catch (error) { console.error("Error downloading the file:", error.message); } } ``` 上述代码片段展示了如何通过异步函数调用远程服务并将接收到的数据转换成 Blob 对象以便于创建可点击链接供用户下载[^2]。 #### 处理跨域资源共享(CORS) 如果应用程序部署在一个不同的域名下，则还需要考虑 CORS 政策的影响。确保服务器允许特定源访问资源，并适当调整 Access-Control-Allow-Origin 等头部字段以支持预检请求(pre-flight request)[^3]。