移動端a標簽下載文件重命名(download)不生效解決辦法

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

在移動端使用a標簽下載文件時,文件重命名可能不生效,尤其是在APP內(nèi)嵌頁面中,這通常是因為跨域問題導致的,文中將解決辦法介紹的非常詳細,需要的朋友可以參考下

項目場景：

移動端使用 a 標簽下載文件

問題描述

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

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

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

原因分析：

跨域問題：如果下載文件所在的服務器與當前頁面不在同一域名下，download屬性可能無法正常工作。這是因為跨域訪問限制了文件下載。

解決方案：

使用fetch或者axios獲取數(shù)據(jù)流，轉成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)
                })