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

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

项目场景:

移动端使用 a 标签下载文件

问题描述

下载的文件使用 download 重命名不生效

APP 中接收数据代码:

 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'

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

相关文章

  • webpack之devtool详解

    webpack之devtool详解

    这篇文章主要介绍了webpack之devtool详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 基于webpack 实用配置方法总结

    基于webpack 实用配置方法总结

    下面小编就为大家带来一篇基于webpack 实用配置方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js添加事件的通用方法推荐

    js添加事件的通用方法推荐

    下面小编就为大家带来一篇js添加事件的通用方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js确认删除对话框适用于a标签及submit

    js确认删除对话框适用于a标签及submit

    这篇文章主要介绍的是一个js确认删除对话框适用于a标签及submit,非常好用,需要的朋友不要错过
    2014-07-07
  • transport.js和jquery冲突问题的解决方法

    transport.js和jquery冲突问题的解决方法

    这篇文章主要介绍了transport.js和jquery冲突问题的解决方法,需要的朋友可以参考下
    2015-02-02
  • js原生Ajax的封装和原理详解

    js原生Ajax的封装和原理详解

    这篇文章主要为大家详细介绍了js原生Ajax的封装和原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS如何将秒数转化为时分秒的形式

    JS如何将秒数转化为时分秒的形式

    在实际工作中经常会遇见把秒数转化为时分秒的问题,如何处理呢?下面这篇文章主要给大家介绍了关于JS如何将秒数转化为时分秒形式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Uniapp 实现全民分销功能原理解析

    Uniapp 实现全民分销功能原理解析

    这篇文章主要介绍了Uniapp 实现全民分销功能,本篇文章主要介绍全民分销功能实现原理,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • ionic中的$ionicPlatform.ready事件中的通用设置

    ionic中的$ionicPlatform.ready事件中的通用设置

    $ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件,相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理
    2017-06-06
  • NodeJS的Promise的用法解析

    NodeJS的Promise的用法解析

    下面小编就为大家带来一篇NodeJS的Promise的用法解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-05-05

最新评论