移动端a标签下载文件重命名(download)不生效解决办法
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
项目场景:
移动端使用
a
标签下载文件
问题描述
下载的文件使用
download
重命名不生效
APP 中接收数据代码:
1 2 3 4 5 6 7 | const link = document.createElement( 'a' ) // 创建a标签 link.style.display = 'none' // 使其隐藏 link.href = 'http://192.168.103.1:8080/factory/v1/group1/M00/00/30/wKhnWWa6xf2AEеKVAAAAFQHKOQM949.txt' // 赋予文件下载地址 link.setAttribute( 'download' , `${dayjs( new Date()).format( 'YYYY-MM-DD HH:mm:ss' )}`) // 设置下载属性 以及文件名 document.body.appendChild(link) // a标签插至页面中 link.click() // 强制触发a标签事件 document.body.removeChild(link) |
原因分析:
跨域问题:如果下载文件所在的服务器与当前页面不在同一域名下,download属性可能无法正常工作。这是因为跨域访问限制了文件下载。
解决方案:
使用
fetch
或者axios
获取数据流,转成blob
之后就是同源的文件了,此时可以使用a
标签正常下载了,注意需要添加请求头'Content-Type': 'application/json;charset=UTF-8'
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | fetch( 'http://192.168.103.1:8080/factory/v1/group1/M00/00/30/wKhnWWa6xf2AEеKVAAAAFQHKOQM949.txt' , { method: 'get' , heanders: { 'Content-Type' : 'application/json;charset=UTF-8' } }) .then(res => res.blob()) .then(blob => { const link = document.createElement( 'a' ) link.style.display = 'none' link.download = `${dayjs( new Date()).format( 'YYYY-MM-DD HH:mm:ss' )}` // 设置下载属性 以及文件名 link.href = URL.createObjectURL(blob) document.body.appendChild(link) link.click() // 释放的 URL 对象以及移除 a 标签 URL.revokeObjectURL(link.href) document.body.removeChild(link) }) |
总结
到此这篇关于移动端a标签下载文件重命名(download)不生效解决办法的文章就介绍到这了,更多相关a标签下载文件重命名不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
这篇文章主要介绍了JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2018-12-12js全屏事件fullscreenchange 实现全屏、退出全屏操作
这篇文章主要为大家详细介绍了js全屏事件fullscreenchange,实现全屏、退出全屏操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-09-09
最新评论