vue3下载导出文件方法

### 在 Vue3 中通过 GET 请求实现文件导出 为了实现在 Vue3 应用程序中使用 GET 方法来导出文件，可以采用多种方式。一种简单的方法是利用浏览器内置的 `window.location.href` 或者动态创建 `<a>` 标签的方式触发下载行为。 当需要发起 HTTP 请求并与服务器交互时，则可以通过配置 Axios 的响应类型为 `blob` 来处理二进制数据流，并将其转换成可被用户保存至本地系统的文件[^5]。 以下是具体实现方案： #### 使用 window.location.href 方式 这种方式适用于 URL 参数可以直接携带所需信息的情况。 ```javascript // 假设这是你要访问的服务端API路径 const exportUrl = `${process.env.VUE_APP_API_HOST}/api/export`; // 设置查询参数（如果有的话） const params = new URLSearchParams({ paramKey: &#39;paramValue&#39; }); // 将参数附加到URL后面并重定向页面跳转以启动下载过程 window.location.href = `${exportUrl}?${params.toString()}`; ``` #### 动态创建 a 链接元素 这种方法更加灵活，允许更复杂的操作如指定文件名等。 ```html <template> <!-- 组件模板 --> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39;; function handleDownloadFile(){ const url = `${process.env.VUE_APP_API_HOST}/api/export`; // 创建隐藏的<a>标签用于模拟点击事件触发下载动作 var linkElement = document.createElement(&#39;a&#39;); linkElement.style.display = &#39;none&#39;; linkElement.href = url; linkElement.download = "filename"; // 自定义文件名称 // 添加到DOM树以便能够触发click() document.body.appendChild(linkElement); // 执行点击事件开始下载流程 linkElement.click(); // 下载完成后移除临时节点保持页面整洁 document.body.removeChild(linkElement); } </script> ``` 这两种方法都适合于简单的场景，在实际应用中可能还需要考虑错误处理机制以及对于不同类型的文件做出适当调整。