移動(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àn)榭缬騿栴}導(dǎo)致的,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下

項(xiàng)目場景：

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

問題描述

下載的文件使用 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)簽插至頁面中
            link.click() // 強(qiáng)制觸發(fā)a標(biāo)簽事件
            document.body.removeChild(link)

原因分析：

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

解決方案：

使用fetch或者axios獲取數(shù)據(jù)流，轉(zhuǎn)成blob 之后就是同源的文件了，此時(shí)可以使用a標(biāo)簽正常下載了，注意需要添加請求頭'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 對象以及移除 a 標(biāo)簽
                    URL.revokeObjectURL(link.href)
                    document.body.removeChild(link)
                })