【vue下载】vue 点击下载图片直接打开问题解决
问题:点击下载按钮,用a标签的download属性,会在当前页直接打开图片适用base64转换也还是如此最后用了blob转换,问题解决<el-button type="text" size="small"v-if="scope.row[fileDataName[0]]"@click="onUpLoad(scope.row.fileUrl, scope.row)">下载</el-b
·
问题:
点击下载按钮,用a标签的download属性,会在当前页直接打开图片
使用base64转换也还是如此
最后用了blob转换,问题解决
<el-button type="text" size="small"
v-if="scope.row[fileDataName[0]]"
@click="onUpLoad(scope.row.fileUrl, scope.row)">
下载
</el-button>
/** 下载文件 */
async onUpLoad(callback, file) {
let url = file.fileUrl
let data = await fetch(url)
.then(response => response.blob())
.then(res => {
console.log(res, '==============')
let blod = new Blob([res])
let name = file.realName
this.downloadBlob(blod, name)
})
return data
},
downloadBlob(blob, fileName) {
try {
const href = window.URL.createObjectURL(blob) //创建下载的链接
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, fileName)
} else {
const downloadElement = document.createElement('a')
downloadElement.href = href
downloadElement.target = '_blank'
downloadElement.download = fileName
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
}
} catch (e) {
console.log('下载失败')
}
},
更多推荐
已为社区贡献35条内容
所有评论(0)