当下载文件中存在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

<span v-down="url">下载</span>
 

Logo

前往低代码交流专区

更多推荐