【vue下载】vue 点击下载图片直接打开问题解决

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 问题： 点击下载按钮，用a标签的download属性，会在当前页直接打开图片

使用base64转换也还是如此

最后用了blob转换，问题解决

  <el-button type="text" size="small"
   v-if="scope.row[fileDataName[0]]"
    @click="onUpLoad(scope.row.fileUrl, scope.row)">
    下载
    </el-button>

 /** 下载文件 */
    async onUpLoad(callback, file) {
      let url = file.fileUrl
      let data = await fetch(url)
        .then(response => response.blob())
        .then(res => {
          console.log(res, '==============')
          let blod = new Blob([res])
          let name = file.realName
          this.downloadBlob(blod, name)
        })
      return data
    },

 downloadBlob(blob, fileName) {
      try {
        const href = window.URL.createObjectURL(blob) //创建下载的链接
        if (window.navigator.msSaveBlob) {
          window.navigator.msSaveBlob(blob, fileName)
        } else {       
          const downloadElement = document.createElement('a')
          downloadElement.href = href
          downloadElement.target = '_blank'
          downloadElement.download = fileName
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        }
      } catch (e) {
        console.log('下载失败')
      }
    },