我們在做需求的時候，經常會遇到下載文件

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

使用 a 鏈接進行下載：

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

向后端發送請求進行下載：

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 鏈接下載 文件時，對于.word、.xlsx等后綴的文件，通過點擊 a 鏈接可以直接進行下載

<a herf="xxxx.xlsx">點擊直接下載</a>

但是對于. jpg、.png等后綴的圖片文件，點擊超鏈接是進行的預覽模式，這是因為如果你是下載瀏覽器無法解析的文件，例如.exe,.xlsx…那么瀏覽器也會自動下載，但是如果你使用瀏覽器可以解析的文件，比如.txt,.png…瀏覽器就會采取預覽模式，所以無論如何你都無法直接彈出下載框。

<a herf="xxxx.jpg">點擊直接下載</a>

這時候如果我們不進行特殊設置，他會直接在本頁面打開圖片，體驗度不是很好，所以我們需要設置target="_blank"屬性，使其新建窗口打開，然后手動下載

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

所以我們需要一個函數來幫我們判斷文件類型

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年崗位工作目標評估表_樣例.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>)) }

細心的人會發現，我們下載下來的文件名可能會是 亂碼

雖然我們上傳的時候選擇的文件名是我們自己設置的

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

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

你以為這就行了嗎

no no no

只有 火狐 和 谷歌 才支持這個屬性

結果你在 a 標簽上設置了download 屬性，結果發現在 谷歌 或 火狐 下載下來的文件名還是亂碼

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

這是因為 href屬性的地址必須是和你前端js非跨域的地址，如果引用的是第三方的網站或者說是前后端分離的項目，調用后臺的接口，這時download就會不起作用

如果我們使用本地相對路徑的地址它則會起作用

<a href="/images/a.exe" download="b">點擊下載</a>

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。