背景：我们项目的文件都是前端直接将文件上传到阿里云，将阿里云返回的信息提交给后台
获取文件的时候，根据后台返回的信息（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()
}
}
