标签下载文件重命名失败，download无效解决方案

背景：我们项目的文件都是前端直接将文件上传到阿里云，将阿里云返回的信息提交给后台
获取文件的时候，根据后台返回的信息（key）去阿里云上拉去文件
需求：后台返回的文件为key.xls等文件，key为上传阿里云时生成的key，产品的要求为下载文件名称为上传时的文件名

遇见问题：
a标签可以实现文件下载并对文件重新命名，但是在真是操作的时候使用dowmload属性设置文件名一直失败，在此记录，避免有同需求的采坑
问题产生的原因：
1.download可以实现对下载文件的重新命名，但是存在兼容性，只有chrome和opear有效
2，下载文件不是在子集的服务器域名中，浏览器会忽略download属性，即跨域会导致download属性无效
比如：
<a download="课程附件.pdf " href="http://tmallapi.bluemoon.com.cn/课程.pdf">test</a>
如果你的系统的访问域名不是http://tmallapi.bluemoon.com.cn，download就会无效
很显然我们的系统域名和阿里云的href肯定不一致，即download无效
3，最终通过其他手段解决的，ie浏览器的navigator.msSaveBlob(blob, filename)
和给谷歌浏览器设置responseType='blob'完美解决

代码

// attach为后台返回的文件信息
<el-button type="primary" icon="el-icon-download" @click="dowmload(attach)" size="mini"></el-button>
   
 dowmload(item){
      this.getImgUrl(item.key).then(res => {
        if (res.data && res.data.data)
          this.downloadFile(res.data.data.url,item.fileName)
      })
    },
// 以key换取阿里云上的文件信息
    getImgUrl(key) {
      return axios.post("/fs/adapter-v2/access", {
        key: key,
        expires: 15,
        productType: "inspection",
      })
    },
// 区分ie浏览器和chrome浏览器实现修改文件名
     downloadFile (url, fileName) {
        // 兼容ie
        if ('ActiveXObject' in window) {
          // ie浏览器没有解决
         // 网上说navigator.msSaveBlob(blob, filename);如果这句话管用，那下面代码不需要了 这个属性那是blob是哪来的，没有测试
          this.createAndRemove(url, fileName)   // 实现了ie浏览我的下载，但是没有实现修改文件名的需求
        } else { 
          const x = new XMLHttpRequest()
          x.open('GET', url, true)
          x.responseType = 'blob'
          x.onload = () => {
            const url = window.URL.createObjectURL(x.response)
            this.createAndRemove(url, fileName)
          }
          x.send()
        }
      }