解决因跨域导致使用a标签下载文件download属性失效无法自定义命名的问题
问题背景:
在使用a标签下载文件时,download属性可以更改下载的文件
// 下载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