我們?cè)谧鲂枨蟮臅r(shí)候，經(jīng)常會(huì)遇到下載文件

前端下載文件一般分為兩種方式：

使用 a 鏈接進(jìn)行下載：

<a herf="url" >下載</a>

向后端發(fā)送請(qǐng)求進(jìn)行下載：

methods:{downloadReport(item,index){let date = item.plans[this.daysIndex[index]]let url = 'url'this.axios({method:'get',url:url,responseType:'blob',}).then((data) => {if (!data) {return}let url = window.URL.createObjectURL(data.data)let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', 'excel.xls')document.body.appendChild(link)link.click()})}, }

很多情況下我們使用 a 鏈接下載 文件時(shí)，對(duì)于.word、.xlsx等后綴的文件，通過(guò)點(diǎn)擊 a 鏈接可以直接進(jìn)行下載

<a herf="xxxx.xlsx">點(diǎn)擊直接下載</a>

但是對(duì)于. jpg、.png等后綴的圖片文件，點(diǎn)擊超鏈接是進(jìn)行的預(yù)覽模式，這是因?yàn)?strong>如果你是下載瀏覽器無(wú)法解析的文件，例如.exe,.xlsx…那么瀏覽器也會(huì)自動(dòng)下載，但是如果你使用瀏覽器可以解析的文件，比如.txt,.png…瀏覽器就會(huì)采取預(yù)覽模式，所以無(wú)論如何你都無(wú)法直接彈出下載框。

<a herf="xxxx.jpg">點(diǎn)擊直接下載</a>

這時(shí)候如果我們不進(jìn)行特殊設(shè)置，他會(huì)直接在本頁(yè)面打開(kāi)圖片，體驗(yàn)度不是很好，所以我們需要設(shè)置target="_blank"屬性，使其新建窗口打開(kāi)，然后手動(dòng)下載

<ahref={`${HttpProps.IMG_ROOT}/${item.url}`}// 超鏈接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 來(lái)堵住釣魚(yú)安全漏洞。如果你在鏈接上使用 target="_blank"屬性，并且不加上rel="noopener"屬性，那么你就讓用戶(hù)暴露在一個(gè)非常簡(jiǎn)單的釣魚(yú)攻擊之下。rel="noopener noreferrer"target="_blank" >點(diǎn)擊預(yù)覽 </a>

所以我們需要一個(gè)函數(shù)來(lái)幫我們判斷文件類(lèi)型

function judgeUrlIsImage(url) {if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(url)) {return true}return false }

綜上所述：使用a鏈接下載文件的代碼大致為(以react為例)：

js: const judgeUrlIsImage = (url) => {if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(url)) {return true}return false } html: const urlInfo = {name: "2020年崗位工作目標(biāo)評(píng)估表_樣例.xlsx"size: 214962status: "done"type: "image/png"url: "url.xlsx" } render() {return (judgeUrlIsImage(urlInfo.url) ? (<a herf={urlInfo.url} rel="noopener noreferrer" target="_blank">{urlInfo.name}</a>) : (<a herf={urlInfo.url}>{urlInfo.name}</a>)) }

細(xì)心的人會(huì)發(fā)現(xiàn)，我們下載下來(lái)的文件名可能會(huì)是 亂碼

雖然我們上傳的時(shí)候選擇的文件名是我們自己設(shè)置的

但是我們上傳到阿里云的時(shí)候，后段為了保證每個(gè)人上傳的文件做區(qū)分，可能大家上傳的文件名相同，所以生成了隨機(jī)碼做為文件的名字，其實(shí)我們下載下來(lái)的真正名字取決于它

很好，W3school也為我們提供了downLoad去控制下載文件的名稱(chēng)屬性

你以為這就行了嗎

no no no

只有 火狐 和 谷歌 才支持這個(gè)屬性

結(jié)果你在 a 標(biāo)簽上設(shè)置了download 屬性，結(jié)果發(fā)現(xiàn)在 谷歌 或 火狐 下載下來(lái)的文件名還是亂碼

<a herf={urlInfo.url} download={urlInfo.name}>{urlInfo.name}</a>

這是因?yàn)?href屬性的地址必須是和你前端js非跨域的地址，如果引用的是第三方的網(wǎng)站或者說(shuō)是前后端分離的項(xiàng)目，調(diào)用后臺(tái)的接口，這時(shí)download就會(huì)不起作用

如果我們使用本地相對(duì)路徑的地址它則會(huì)起作用

<a href="/images/a.exe" download="b">點(diǎn)擊下載</a>

所以，如果你想要 自定義下載文件名或者直接下載圖片，可以和后端約定 要么上傳圖片的時(shí)候就存入中文名，要么讓后端做下載操作，然后給你提供接口，你去請(qǐng)求就👌啦。

總結(jié)

以上是生活随笔為你收集整理的HTML a链接下载文件之图片，文件，乱码等问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。