vue 点击按钮请求接口将返回得base64转为文件并下载
时间: 2024-01-28 15:04:55 浏览: 28
好的,你可以按照以下步骤实现:
1. 在 Vue 组件中定义一个方法,用于发送请求并下载文件:
```
downloadFile() {
axios.get('your_api_url', { responseType: 'arraybuffer' })
.then(response => {
const blob = new Blob([response.data], { type: 'application/octet-stream' })
const fileName = 'your_file_name'
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}
```
2. 在模板中添加一个按钮,并绑定点击事件:
```
<button @click="downloadFile">下载文件</button>
```
3. 说明:
- `axios` 是一个常用的基于 Promise 的 HTTP 库,用于发送请求。
- `responseType: 'arraybuffer'` 表示响应数据的类型为 ArrayBuffer。
- `Blob` 构造函数用于创建一个二进制对象,用于表示文件数据。
- `window.URL.createObjectURL` 方法用于创建一个指向 Blob 对象的 URL。
- `link` 元素用于创建一个下载链接。
- `link.click()` 方法用于模拟点击下载链接。
- `document.body.removeChild(link)` 方法用于删除下载链接。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)