Vue下载文件,如何把后端返回的文件流变为下载地址

最新推荐文章于 2024-08-20 18:30:57 发布

A-飞龙在天

最新推荐文章于 2024-08-20 18:30:57 发布

阅读量2.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/HuangZeJunXXX/article/details/103458707

版权

本文介绍如何在Vue中利用axios从后端获取文件流，并将其转换为可下载的链接。通过设置responseType为'blob'，创建Blob对象，并结合a标签实现文件下载功能。示例代码包括axios的post请求和get请求，适用于下载Excel和PDF等不同类型的文件。

摘要由CSDN通过智能技术生成

axios({
method: ‘post’,
url: ‘api/user/’,
data: {
firstName: ‘Fred’,
lastName: ‘Flintstone’
},
responseType: ‘blob’
}).then(response => {
this.download(response)
}).catch((error) => {

})

methods: {
// 下载文件
download (data) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement(‘a’)
link.style.display = ‘none’
link.href = url
link.setAttribute(‘download’, ‘excel.xlsx’)

    document.body.appendChild(link)
    link.click()
}

}

import axios from ‘axios’;
axios.get(url, { //url: 接口地址
responseType: arraybuffer //一定要写
})
.then(res => {
if(res.status == 200){
let blob = new Blob([