vue项目后台返回流文件下载和url下载
【代码】vue项目后台返回流文件下载和url下载。
·
第一种后台返回url的下载
https://xxx/xxx20230801154328b4950ca6-c6f2-44f7-8466-fc6ca89ce166.xlsx
let url = file;//这里是后台返回的url
let a_link = document.createElement('a')
// 这里是将url转成blob地址,
fetch(url).then((res) => res.blob())
.then((blob) => {
// 将链接地址字符内容转变成blob地址
a_link.href = URL.createObjectURL(blob)
console.log(a_link.href)
a_link.download = fileName + '.xlsx' //下载的文件的名字
document.body.appendChild(a_link)
a_link.click()
})
第二种后台返回的是二进制流文件
//请求流文件的方式
axios({
method: 'post',
url: process.env.BASE_API + '/api/register/download',
data: {
"confirmFlg": true,
"data": {},//上传的参数
},
headers: {
Authorization: 'Bearer ' + this.$store.getters.token
},
responseType: 'blob' //非常重要不可少
}).then(res => { // 后台返回的数据 res中存储
// 判断一下后台是否是成功的,成功后直接下载
if (res.status === 200) {
const url = window.URL.createObjectURL(new Blob([res.data]))//返回的数据
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xlsx')//文件名
document.body.appendChild(link)
link.click()
link.remove()
}
})
上传文件时接口参数要求二进制文件流
let requestDatas = new FormData()
requestDatas.append('file', this.$refs.dmtUploadFile.uploadFiles[0].raw)//获取上传的文件信息
request({
url: url,
method: 'POST',
data: requestDatas
}).then(res => {
})
更多推荐
已为社区贡献1条内容
所有评论(0)