移动端a标签下载文件重命名(download)不生效解决办法

 更新时间:2024年10月18日 08:30:21   作者:Julia_0502  
在移动端使用a标签下载文件时,文件重命名可能不生效,尤其是在APP内嵌页面中,这通常是因为跨域问题导致的,文中将解决办法介绍的非常详细,需要的朋友可以参考下

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标签下载文件重命名不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/Julia_0502/article/details/141163724

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论