在使用a标签下载文件时,download
属性可以更改下载的文件名,但是当a标签
的下载链接跨域时,download
属性将不会生效,原因是浏览器无法获取到文件,不能对他进行更改
注意:
html5 新特性a标签download
属性只支持谷歌和火狐
在谷歌和火狐浏览器a标签download
属性修改文件名失效的原因:不同源,访问的域名和href的域名要一致。
解决方法:
使用HTML5 Blob实现文件下载,先把文件以bobl的形式下载到当前页面,再创建a标签。
<a click="downloadFile(fileUrl,fileName)">下载文件</a>
<script>
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()
}
</script>