前端导出excel，后端返回文件

### 实现前端导出 Excel 功能 为了实现在前端接收到后端返回的文件并将其作为 Excel 文件导出，可以采用如下方式： #### 使用 JavaScript 进行文件下载操作 当从服务器获取到二进制流形式的数据时，可以通过创建一个临时的 `<a>` 标签来触发浏览器默认的下载行为。下面是一个具体的实现方案。 ```javascript // 定义用于下载文件的方法 function downloadFile(blobData, fileName) { const blob = new Blob([blobData], { type: "application/vnd.ms-excel;charset=utf-8" }); if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE兼容处理 navigator.msSaveBlob(blob, fileName); } else { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = fileName; document.body.appendChild(link); link.click(); setTimeout(() => { URL.revokeObjectURL(link.href); // 清理内存中的对象url document.body.removeChild(link); // 移除动态创建的<a>标签 }, 100); } } ``` 此段代码定义了一个名为 `downloadFile` 的函数，它接受两个参数：一个是来自服务端响应体内的二进制数据（即文件内容），另一个是要保存下来的文件名称[^1]。 #### 发起 HTTP 请求并与上述方法结合使用 接下来展示如何通过发起 GET 或 POST 请求向服务器请求特定资源，并利用上面提到的辅助工具完成实际的文件下载过程。 ```javascript async function exportExcel() { try { let response = await axios({ url: "/api/export/excel", // 替换成真实的API路径 method: 'GET', responseType: 'blob', // 设置responseType为'blob' params: {} // 如果有查询条件可在此处设置 }); if (!response || !response.data) throw Error("Failed to fetch data"); // 调用之前编写的downloadFile函数执行下载动作 downloadFile(response.data, "example.xlsx"); } catch(error){ console.error("Error occurred during exporting excel:", error.message); } } ``` 这段脚本展示了怎样发送 AJAX 请求给指定的服务地址 `/api/export/excel` 来获得目标文档的内容；一旦成功取得回应，则立即调用前面介绍过的 `downloadFile()` 函数来进行最终的文件保存工作[^2]。