vue

vue自定义指令 点击下载

2020-08-10  本文已影响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()

                    })

                    })

                }

                })

上一篇 下一篇

猜你喜欢

热点阅读