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

vue自定义指令 点击下载

作者: 徐福瑞 | 来源:发表于2020-08-10 15:09 被阅读0次


html

  <span v-down="Url" class="xia_zai">文件名</span>

js

 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()

                    })

                    })

                }

                })

相关文章

网友评论

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

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