移動端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ù)流，轉(zhuǎn)成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)
})
總結(jié)
到此這篇關于移動端a標簽下載文件重命名(download)不生效解決辦法的文章就介紹到這了,更多相關a標簽下載文件重命名不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了webpack之devtool詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
下面小編就為大家?guī)硪黄趙ebpack 實用配置方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
下面小編就為大家?guī)硪黄猨s添加事件的通用方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹的是一個js確認刪除對話框適用于a標簽及submit，非常好用，需要的朋友不要錯過2014-07-07
這篇文章主要介紹了transport.js和jquery沖突問題的解決方法,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了js原生Ajax的封裝和原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
在實際工作中經(jīng)常會遇見把秒數(shù)轉(zhuǎn)化為時分秒的問題,如何處理呢?下面這篇文章主要給大家介紹了關于JS如何將秒數(shù)轉(zhuǎn)化為時分秒形式的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Uniapp?實現(xiàn)全民分銷功能,本篇文章主要介紹全民分銷功能實現(xiàn)原理，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06
ionic中的$ionicPlatform.ready事件中的通用設置
$ionicPlatform.ready事件是用于檢測當前的平臺是否就緒的事件，相當于基于document的deviceready事件, 在app中一些通用關于設備的設置必須在這個事件中處理2017-06-06
下面小編就為大家?guī)硪黄狽odeJS的Promise的用法解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05