Vue 实现a标签下载图片而不是直接打开的问题解决方案
当下载文件中存在jpg、txt等浏览器可以直接预览的文件时,上面的方法就会出现问题,即使加了download仍然会在浏览器中打开下载文件我们可以将下载地址借助Blob转换成二进制,然后,作为a标签的href属性,配合download属性,实现下载。具体实现代码如下:Vue.directive('down', {inserted: (el, binding) => {el.style.cssT
当下载文件中存在jpg、txt等浏览器可以直接预览的文件,使用a标签即使加了download仍然会在浏览器中打开下载文件
我们可以将下载地址借助Blob转换成二进制,然后,作为a标签的href属性,配合download属性,实现下载。
具体实现代码如下:
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 = baseDownloadUrl + 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()
})
})
}
})
Vue页面中使用指令v-down
<span v-down="url">下载</span>
更多推荐
所有评论(0)