解决因跨域导致使用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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2020-05-29 mysql将语句写入表中
2019-05-29 vue注意点
2019-05-29 织梦新建文档保存时出现 模板文件不存在,无法解析文档!
2019-05-29 css 限制字数