美文网首页vue
vue 自定义指令 点击下载

vue 自定义指令 点击下载

作者: 徐福瑞 | 来源:发表于2020-09-29 11:39 被阅读0次

自定义v-

 <span v-down="Url" class="xia_zai">文件名</span>
 let baseDownloadUrl = 'http://xjy.dbkj.com'  // 域名
            Vue.directive('down', {
                inserted: (el, binding) => {
                    el.style.cssText = 'cursor: pointer;'
                    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()
                    })
                    })
                }
                })
reurn

Url:"/img/11.jpg",

相关文章

网友评论

    本文标题:vue 自定义指令 点击下载

    本文链接:https://www.haomeiwen.com/subject/pcfeuktx.html