首页vue axios post 请求下载文件

vue axios post 请求下载文件

时间: 2023-07-25 09:24:32 浏览: 171

要使用 Vue 和 Axios 进行 POST 请求下载文件，可以使用以下步骤： 1. 在 Vue 组件中引入 Axios： ```javascript import axios from 'axios'; ``` 2. 定义一个方法来发送 POST 请求并下载文件： ```javascript downloadFile() { axios({ url: '/api/download', method: 'POST', responseType: 'blob', // 告诉 Axios 返回的数据类型为 Blob data: { // 如果需要发送数据，可以在这里添加 }, }).then((response) => { // 创建一个链接来下载文件 const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'filename.xlsx'); // 设置文件名 document.body.appendChild(link); link.click(); }); }, ``` 在这个方法中，我们使用 Axios 发送一个 POST 请求，并将 `responseType` 设置为 `blob`，这意味着 Axios 会将响应数据解析为 Blob 类型。 3. 在组件的模板中添加一个按钮来触发下载： ```html <template> <div> <button @click="downloadFile">下载文件</button> </div> </template> ``` 这个按钮会触发 `downloadFile` 方法，从服务器下载文件并将其保存到客户端。注意：在这里，我们假设服务器将文件以 Blob 类型作为响应数据返回。如果服务器返回的数据类型不是 Blob，你需要相应地调整代码。

阅读全文