Vue a标签实现点击下载图片，不直接打开
2020-12-17 本文已影响0人
花影_62b4
在main.js里加指令
Vue.directive('down', {
inserted: (el, binding) => {
el.style.cssText = 'cursor: pointer;color:write;'
el.addEventListener('click', () => {
console.log(binding.value)
let link = document.createElement('a')
let url = binding.value
// 这里是将url转成blob地址，
fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
link.href = URL.createObjectURL(blob)
console.log(link.href)
link.download = ''
document.body.appendChild(link)
link.click()
})
})
}
})
在页面中使用，直接使用v-down就能实现下载功能
<div v-down="qrCodeUrl" >
<img :src="qrCodeUrl" alt="会议签到二维码" width="300" height="300">
<span class="info">（点击图片立即下载）</span>
</div>
