记web端a标签下载或预览文件

思路

• 下载的URL最好通过fetch转blob再转换成URL，这样URL用来下载和预览都没问题啦。
• 下载的话只需要在a标签加个download属性即可。
• 预览的话可以target="_blank"在新窗口打开。

vue自定义v-down指令下载

// 自定义v-down指令
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 baseDownloadUrl = localStorage.getItem('ApiAddess') + 'file/' //基地址(换成自己的)
      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()
      })
    })
  }
})