vue excel下载后端生成的excel

### 实现 Vue3 下载 Excel 文件 #### 准备工作 为了能够在 Vue3 项目中顺利实现从后端接口下载 Excel 文件，需先配置好环境。确保已安装 `axios` 库用于发起 HTTP 请求[^1]。 ```bash npm install axios ``` #### 创建 API 接口函数 定义专门处理文件下载请求的方法，在此例子中假设创建了一个名为 `api.js` 的文件用来封装网络请求逻辑： ```javascript// api.js import axios from 'axios' import { getToken } from '@/utils/auth' // 假设有一个获取token的方法 export function downloadExcel(url) { const token = getToken() return axios({ url, method: 'GET', responseType: 'blob', // 设置响应数据类型为二进制流 headers: { Authorization: token ? `Bearer ${token}` : '' } }) } ``` 该方法接收 URL 参数作为目标地址，并设置合适的头部信息以便于身份验证以及指定返回的数据格式为 blob 类型，从而支持不同类型的文件下载需求[^3]。 #### 组件内调用API并触发下载行为 接下来是在具体的组件里引入刚才编写的辅助函数，并编写相应事件处理器来触发表格导出操作: ```vue<!-- MyComponent.vue --> <template> <button @click="handleDownload">点击下载</button> </template> <script setup> import { ref } from "vue"; import { ElMessage } from 'element-plus'; import { downloadExcel } from './path/to/api'; const handleDownload = async () => { try { let response = await downloadExcel('/api/excel/download'); // 获取到Blob对象之后就可以构建一个临时链接来进行浏览器自动下载了 var linkElement = document.createElement('a'); var blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8;' }); var fileName = decodeURI(response.headers['content-disposition'].split('=')[1]); linkElement.setAttribute('href', window.URL.createObjectURL(blob)); linkElement.setAttribute("download", fileName); linkElement.style.visibility = "hidden"; document.body.appendChild(linkElement); linkElement.click(); document.body.removeChild(linkElement); } catch (error) { console.error(error); ElMessage.error('下载失败！'); } }; </script> ``` 这段代码展示了当用户点击按钮时会执行异步函数 `handleDownload()` ，它负责向服务器发送 GET 请求以获得 Excel 数据流；成功接收到响应体中的 binary data 后，则利用 JavaScript 动态生成 `<a>` 标签模拟用户的点击动作完成实际意义上的文件保存过程[^4]。

要在 Vue 前端调用后端接口导出 Excel 文件，可以采用以下步骤： 1. 在后端编写导出 Excel 的接口，通常采用 Spring MVC 或者 Express 等框架，在接口中使用 Apache POI 或者其他 Excel 库生成 Excel 文件，并将生成的文件以流的形式返回给前端。 2. 在前端编写调用后端接口的代码，通常可以使用 axios 或者其他 HTTP 请求库来发送请求，并将返回的文件流保存到本地，同时进行下载操作。 以下是一个简单的 Vue 组件示例代码： ```html <template> <div> <button @click="exportExcel">导出 Excel</button> </div> </template> <script> import axios from 'axios' export default { methods: { exportExcel() { axios({ url: '/api/export', method: 'GET', responseType: 'blob', }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'export.xlsx') document.body.appendChild(link) link.click() }) }, }, } </script> ``` 以上代码中，我们定义了一个 `exportExcel` 方法，当用户点击按钮时会触发该方法。在方法中，我们使用 axios 发送 GET 请求，并将响应类型设置为 blob，这样可以保留文件流的形式。在获取到响应后，我们将其转换为 URL 对象，创建一个下载链接，并触发点击操作，从而实现文件的下载。我们可以将请求的 URL 设置为后端提供的接口，例如 `'/api/export'`，从而实现与后端的交互。