Vue 实现a标签下载图片而不是直接打开的问题解决方案

当下载文件中存在jpg、txt等浏览器可以直接预览的文件，使用a标签即使加了download仍然会在浏览器中打开下载文件
我们可以将下载地址借助Blob转换成二进制，然后，作为a标签的href属性，配合download属性，实现下载。
具体实现代码如下：
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 = 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页面中使用指令v-down

下载