解决因跨域导致使用a标签下载文件download属性失效无法自定义命名的问题

问题背景：

在使用a标签下载文件时，download属性可以更改下载的文件

?

1 2 3 4 5 6

// 下载a.exe,并采用默认命名 <a href="/images/a.exe" download>点击下载</a>       // 将a.exe改名为b.exe下载 <a href="/images/a.exe" download="b">点击下载</a>

注意：

html5 新特性a标签download属性只支持谷歌和火狐
在谷歌和火狐浏览器a标签download属性修改文件名失效的原因：不同源，访问的域名和href的域名要一致。

 解决方法：

使用Blob实现文件下载，先把文件以bobl的形式下载到当前页面，再创建a标签。

// 下载url(解决跨域a.download不生效问题)
      downloadFile(url, fileName) {
        const x = new XMLHttpRequest()
        x.open("GET", url, true)
        x.responseType = 'blob'
        x.onload = function(e) {
          const url = window.URL.createObjectURL(x.response)
          const a = document.createElement('a')
          a.href = url
          a.target = '_blank'
          a.download = fileName
          a.click()
          a.remove()
        }
        x.send()
      },

      <el-link
        :disabled="validateNull(fileUrl)"
        :type="validateNull(fileUrl) ? 'info' : 'primary'"
        :underline="true"
        style="font-size:14px;"
        @click="downloadFile(fileUrl, fileName)"
      >
        {{ fileName|| '-' }}
      </el-link>

 

 

 

ps: https://blog.csdn.net/qq_44170108/article/details/134415071