需求解析
此需求开始的时候最大的误区是,因为后端生成byte数组比较容易,因此总想在后端将其转为Blob发送,过程中遇到很多问题。
后来发现,直接发送字节流即可,前端将其转化为Blob很容易。
下载接口编写
getFile(path) {
let formData = new FormData();
formData.append('path', path); // 用于后端下载文件的路径
this.$axios
.post('http://localhost:8090/warheadModel/getFile', formData, {
responseType: 'blob'
})
.then(response => {
if (response.status == 200){
console.log(response)
let url = window.URL.createObjectURL(new Blob([response.data])) // 将获取的文件转化为blob格式
let a = document.createElement('a'); // 此处向下是打开一个储存位置
a.style.display = 'none';
a.href = url;
// 下面两行是自己项目需要的处理,总之就是得到下载的文件名(加后缀)即可
var fileNameArray = path.split('#')[1].split('/')
var fileName = fileNameArray[fileNameArray.length-1]
a.setAttribute('download',fileName);
document.body.appendChild(a);
a.click();//点击下载
document.body.removeChild(a);// 下载完成移除元素
window.URL.revokeObjectURL(url);// 释放掉blob对象
this.$message.success("文件下载成功") //删除弹窗
}
else {
this.$message.error("文件下载失败")
}
})
}