移动端a标签下载文件重定名(download)不收效办理办法

2024-11-3 11:13| 发布者: 8b79| 查看: 104| 评论: 0

摘要: 目录项目场景：标题形貌原因分析：办理方案：总结项目场景： [code]移动端使用 [code]a[/code] 标签下载文件[/code] 标题形貌 [code]下载的文件使用 [code]download[/code] 重定名不收效[/code]

项目场景：

[code]移动端使用 [code]a[/code] 标签下载文件[/code]

标题形貌

[code]下载的文件使用 [code]download[/code] 重定名不收效[/code]

APP 中接收数据代码：

[code] 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) [/code]

原因分析：

[code]跨域标题：假如下载文件地点的服务器与当前页面不在同一域名下，download属性可能无法正常工作。这是因为跨域访问限定了文件下载。[/code]

办理方案：

[code]使用[code]fetch[/code]大概[code]axios[/code]获取数据流，转成[code]blob[/code] 之后就是同源的文件了，此时可以使用[code]a[/code]标签正常下载了，留意必要添加请求头[code]'Content-Type': 'application/json;charset=UTF-8'[/code][/code] [code]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) }) [/code]

总结

到此这篇关于移动端a标签下载文件重定名(download)不收效办理办法的文章就先容到这了,更多相关a标签下载文件重定名不收效内容请搜索脚本之家以前的文章或继承浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/328963tkd.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：微信小步伐使用wx.navigateTo路由跳转层级限制问题小结下一篇：JavaScript自定义localStorage监听事故的解决方法

账号		自动登录	找回密码
密码			立即注册

移动端a标签下载文件重定名(download)不收效办理办法

目录

项目场景：

标题形貌

原因分析：

办理方案：

总结

相关分类

站长推荐 /6