在vue中a标签Window.loanth.herf下载图片文件失效解决方法

在vue中a标签Window.loanth.herf下载图片文件失效解决方法

在main.js 中加入代码

Vue.directive('down', {
  inserted: (el, binding) => {
    el.style.cssText = 'cursor: pointer;color:write;'
    el.addEventListener('click', () => {
      console.log(binding.value)
      let link = document.createElement('a')
      let url = 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()
      })
    })
  }
})

然后在别的页面中使用跟标签加上v-down="（图片/文件）地址"点击即可下载。