vue 将后台返回文件url 改成文件流下载
由于直接a 标签下载视频,音频会打开新的窗口,所以改用文件流下载
一、图片
exportData(row) {
console.log('row', row)
const reqUrl = row.url
const fileName = row.fileName
downFile(reqUrl)
.then((data) => {
if (data) {
const url = window.URL.createObjectURL(new Blob([data], { type: 'image/jpeg' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.jpeg')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
})
.catch((e) => {
})
},
二、视频
exportData(row) {
console.log('row', row)
const reqUrl = row.url
const fileName = row.fileName
downFile(reqUrl)
.then((data) => {
if (data) {
const url = window.URL.createObjectURL(new Blob([data], { type: 'video/mp4' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.mp4')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
})
.catch((e) => {
})
},
三、音频
exportData(row) {
console.log('row', row)
const reqUrl = row.url
const fileName = row.fileName
downFile(reqUrl)
.then((data) => {
if (data) {
const url = window.URL.createObjectURL(new Blob([data], { type: 'audio/mpeg' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.mp3')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
})
.catch((e) => {
})
},
四、zip
exportData(row) {
console.log('row', row)
const reqUrl = row.url
const fileName = row.fileName
downFile(reqUrl)
.then((data) => {
if (data) {
const url = window.URL.createObjectURL(new Blob([data]), { type: "application/zip" })
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', row.opusCode + '.zip')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
})
.catch((e) => {
})
},
export function downFile(url, parameter) {
return request({ // request为封装的请求
url,
data: qs.stringify(parameter),
method: 'get',
responseType: 'blob'
})
}