快捷導(dǎo)航

移動(dòng)端a標(biāo)簽下載文件重命名(download)不生效解決辦法

更新時(shí)間：2024年10月18日 08:30:21 作者：Julia_0502

在移動(dòng)端使用a標(biāo)簽下載文件時(shí),文件重命名可能不生效,尤其是在APP內(nèi)嵌頁(yè)面中,這通常是因?yàn)榭缬騿?wèn)題導(dǎo)致的,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下

項(xiàng)目場(chǎng)景：

移動(dòng)端使用 a 標(biāo)簽下載文件

問(wèn)題描述

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

APP 中接收數(shù)據(jù)代碼：

 const link = document.createElement('a') // 創(chuàng)建a標(biāo)簽
            link.style.display = 'none' // 使其隱藏
            link. // 賦予文件下載地址
            link.setAttribute('download', `${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}`) // 設(shè)置下載屬性 以及文件名
            document.body.appendChild(link) // a標(biāo)簽插至頁(yè)面中
            link.click() // 強(qiáng)制觸發(fā)a標(biāo)簽事件
            document.body.removeChild(link)

原因分析：

跨域問(wèn)題：如果下載文件所在的服務(wù)器與當(dāng)前頁(yè)面不在同一域名下，download屬性可能無(wú)法正常工作。這是因?yàn)榭缬蛟L問(wèn)限制了文件下載。

解決方案：

使用fetch或者axios獲取數(shù)據(jù)流，轉(zhuǎn)成blob 之后就是同源的文件了，此時(shí)可以使用a標(biāo)簽正常下載了，注意需要添加請(qǐng)求頭'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')}`// 設(shè)置下載屬性 以及文件名
                    link.href = URL.createObjectURL(blob)

                    document.body.appendChild(link)
                    link.click()
                    // 釋放的 URL 對(duì)象以及移除 a 標(biāo)簽
                    URL.revokeObjectURL(link.href)
                    document.body.removeChild(link)
                })

總結(jié)

到此這篇關(guān)于移動(dòng)端a標(biāo)簽下載文件重命名(download)不生效解決辦法的文章就介紹到這了,更多相關(guān)a標(biāo)簽下載文件重命名不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: