vue

vue 自定义指令 点击下载

2020-09-29  本文已影响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",
上一篇 下一篇

猜你喜欢

热点阅读