fetch请求文件流并下载（Excel）

### 前端实现下载Excel文件并动态修改文件名 在前端开发中，为了提升用户体验以及满足实际需求，可以通过多种方式实现在下载 Excel 文件的同时动态修改文件名的功能。以下是具体方法及其背后的实现原理。 #### 方法一：基于 `Blob` 和 `<a>` 标签的方式 此方法利用 JavaScript 的 `Blob` 对象来创建文件对象，并通过 HTML 中的 `<a>` 标签完成文件下载操作。这种方法能够灵活控制文件名称和类型。 ```javascript function downloadFile(blob, fileName) { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); // 创建一个指向 Blob 的 URL link.download = fileName; // 设置下载后的文件名 document.body.appendChild(link); link.click(); // 自动触发点击事件以启动下载 document.body.removeChild(link); // 移除临时创建的 a 标签 } // 调用示例 fetch('/api/export-excel') // 请求获取 Excel 数据流 .then(response => response.blob()) // 将响应转换为 Blob 类型 .then(blob => { downloadFile(blob, 'customFileName.xlsx'); // 动态指定文件名为 customFileName.xlsx }) .catch(error => console.error('Error:', error)); ``` 上述代码实现了从服务器请求 Excel 数据流后将其保存为具有自定义名称的文件[^1]。 --- #### 方法二：使用 Vue.js 结合 Axios 处理文件流 当项目采用 Vue.js 开发框架时，可以借助 Axios 库发起 HTTP 请求并与服务端交互，从而更方便地管理异步逻辑。 ```javascript import axios from 'axios'; export function exportExcel() { axios({ method: 'post', // 或者 get，取决于 API 设计 url: '/api/export-excel', responseType: 'blob' // 关键配置项，用于接收二进制数据流 }).then((response) => { const blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' }); const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = 'dynamicFileName.xlsx'; // 可在此处动态生成文件名 document.body.appendChild(link); link.click(); document.body.removeChild(link); }).catch((error) => { console.error('Failed to fetch and save the file.', error); }); } ``` 该方案适用于需要向后端传递参数的情况（如 POST 请求），并通过设置 `responseType` 参数确保接收到的是原始二进制数据而非字符串编码形式的数据[^5]。 --- #### 方法三：直接调用窗口打开链接 (仅限简单场景) 如果目标资源已经存在于某个固定的网络地址上，则可以直接通过调整 `window.location.href` 或者 `window.open()` 函数跳转至对应路径进行下载。然而需要注意跨域限制可能会影响最终效果。 ```javascript const filename = encodeURIComponent('exampleFilename.xlsx'); // 编码防止特殊字符干扰 const url = `/path/to/your/excel?filename=${filename}`; window.open(url, '_blank'); // 新标签页加载下载页面 ``` 尽管这种做法较为简便快捷，但在某些复杂环境下可能会遇到兼容性问题或者安全性隐患[^2]。 --- ### 总结说明 以上三种技术手段各有优劣，在不同应用场景下可以选择最适合的一种实施策略： - 如果追求灵活性且需支持复杂的业务逻辑，请优先考虑 **方法一** 或 **方法二**； - 若只是单纯提供静态资源访问入口则推荐尝试 **方法三**；不过要注意潜在风险因素的影响范围。 无论选用哪种途径都务必记得妥善处理异常状况以免影响整体程序稳定性。