美文网首页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