前端vue 下载文件(后端传给的文件流)
2023-05-08 本文已影响0人
无题syl
可以使用axios库下载文件流。具体步骤如下:
后端通过URL地址或API接口将文件流传递给前端。
前端使用axios库发送GET请求,获取文件流数据。
在响应拦截器中获取文件流数据,并创建一个Blob对象。
创建一个a标签,设置它的href属性为Blob URL,download属性为文件名,触发点击事件进行下载。
import axios from 'axios';
// 下载文件流
function downloadFile(url) {
axios({
method: 'GET',
url: url,
responseType: 'blob'
})
.then(response => {
// 获取文件流数据
const blob = new Blob([response.data]);
// 创建a标签进行下载
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '文件名';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(error => {
console.log(error);
});
}