這篇文章將為大家詳細(xì)講解有關(guān)download屬性如何在HTML5中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)建站專注于金湖網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供金湖營(yíng)銷型網(wǎng)站建設(shè)，金湖網(wǎng)站制作、金湖網(wǎng)頁(yè)設(shè)計(jì)、金湖網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造金湖網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供金湖網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

download 屬性介紹

常規(guī)的<a> 標(biāo)簽通過(guò) href 實(shí)現(xiàn)鏈接跳轉(zhuǎn)，如果只想下載文件而不是跳轉(zhuǎn)預(yù)覽，好的方式是在<a> 標(biāo)簽中添加download 屬性，就能很簡(jiǎn)單地實(shí)現(xiàn)下載操作。

download 是 HTML5 中<a> 標(biāo)簽新增的一個(gè)屬性，此屬性會(huì)強(qiáng)制觸發(fā)下載操作，指示瀏覽器下載 URL 而不是導(dǎo)航到它，并提示用戶將其保存為本地文件，例如：

<a href="result.png" download>download</a>

如果缺少download 屬性，點(diǎn)擊 "download" 會(huì)直接變成預(yù)覽圖片，當(dāng)添加download 屬性后則會(huì)觸發(fā)圖片的下載。

目前download 屬性的兼容性如caniuse 中所展示的：

可以以看到，大部分主流的瀏覽器基本都已經(jīng)支持download 屬性，而 IE 的表現(xiàn)一如既往的感人，目前許多 Window 系統(tǒng)仍然在使用 IE ，這也是許多業(yè)務(wù)需求需要考慮的。這種兼容性問(wèn)題限制了download 的更廣泛應(yīng)用。

動(dòng)態(tài)資源下載

面對(duì)一些動(dòng)態(tài)內(nèi)容下載的業(yè)務(wù)場(chǎng)景，即圖片等資源的地址并不是固定的（例如一些在線繪圖工具所生成的圖片），只使用 HTML 無(wú)法滿足需求。為了能夠滿足不同的 URL 下載，可以通過(guò)JS 實(shí)現(xiàn)一個(gè)動(dòng)態(tài)觸發(fā) URL 下載的方法。

function download(href, filename='')  {
  const a = document.createElement('a')
  a.download = filename
  a.href = href
  document.body.appendChild(a)  
  a.click()
  a.remove()
}

需要注意的是，代碼中對(duì)創(chuàng)建的<a> 進(jìn)行的appendChild 和remove 操作主要是為了兼容 FireFox 瀏覽器，在 FireFox 瀏覽器下調(diào)用該方法如果不將創(chuàng)建的<a> 標(biāo)簽添加到 body 里，點(diǎn)擊鏈接不會(huì)有任何反應(yīng)，無(wú)法觸發(fā)下載，而在 Chrome 瀏覽器中則不受此影響。

上述的方法可以實(shí)現(xiàn)同源資源的下載。但在很多場(chǎng)景中，還需要處理跨域資源。遺憾的是，download 屬性目前僅適用于同源 URL ，即如果需要下載的資源地址是跨域的，download 屬性就會(huì)失效，點(diǎn)擊鏈接會(huì)變成導(dǎo)航預(yù)覽。

測(cè)試：點(diǎn)擊下載，結(jié)果只是預(yù)覽而無(wú)法下載圖片。

注： Chrome65 之前是支持download 屬性觸發(fā)文件跨域下載的，之后則嚴(yán)格遵循同源策略，無(wú)法再通過(guò)download 屬性觸發(fā)跨域資源的下載。而 FireFox 一直不支持跨域資源的download 屬性下載。

文件命名問(wèn)題

download 屬性不僅可以觸發(fā)下載，也能指定下載文件名：

<a href="test.png" download="joker.png">下載</a>

如果下載文件的后綴與源文件保持一致，可以設(shè)置缺省文件名：

<a href="test.png" download="joker">下載</a>

筆者曾遇到過(guò)一個(gè)問(wèn)題，通過(guò)<a> 標(biāo)簽觸發(fā)跨域資源下載，代碼與上述的download 方法基本相同，只是在設(shè)置download 屬性的地方有點(diǎn)不同：

a.setAttribute(download, true)

結(jié)果在老版本的 Chrome 瀏覽器中出現(xiàn)了如下情況。

下載文件名成了true 。很明顯，瀏覽器將download 屬性值讀成了文件名。

經(jīng)過(guò)分析，出現(xiàn)上述問(wèn)題主要是因?yàn)椋?/p>

1. 首先本不該將download 設(shè)為true ，download 與disabled 這種類型的屬性值不同，它與文件名直接相關(guān)聯(lián)。而且對(duì)于這種前后端響應(yīng)式下載的方式，download 屬性并不是必要的。

2. 在 Chrome 的早期版本不僅支持跨域資源的download 屬性下載，而且還可以通過(guò)download 重置跨域資源的文件名，因此才會(huì)出現(xiàn)上述這種情況。

前后端配合完成文件下載的業(yè)務(wù)場(chǎng)景，一般是由后端設(shè)置響應(yīng)頭中的Content-Disposition 信息來(lái)實(shí)現(xiàn)。

在 HTTP 場(chǎng)景中，Content-Disposition 第一個(gè)參數(shù)或者是 inline（默認(rèn)值，表示回復(fù)中的消息體會(huì)以頁(yè)面的一部分或者整個(gè)頁(yè)面的形式展示），或者是 attachment（意味著消息體應(yīng)該被下載到本地；大多數(shù)瀏覽器會(huì)呈現(xiàn)一個(gè)“保存為”的對(duì)話框，將 filename 的值預(yù)填為下載后的文件名）。

如果在響應(yīng)頭中設(shè)置了Content-Disposition ，前端也在對(duì)應(yīng)鏈接的<a> 標(biāo)簽中添加了download 屬性，那么此時(shí)命名規(guī)則：

如果 HTTP 頭中的 Content-Disposition 屬性賦予了一個(gè)不同于此屬性的文件名，HTTP 頭屬性優(yōu)先于此屬性。

經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，當(dāng) HTTP 頭中Content-Disposition 不為空時(shí)：

在 Chrome 瀏覽器中，不管 HTTP 頭中Content-Disposition 的第一個(gè)參數(shù)被設(shè)為attachment 還是inline ，只要設(shè)置了 filename，download 就無(wú)法重置文件名。相反，當(dāng) filename 為空時(shí)，download 屬性值會(huì)被設(shè)為文件名。 在 FireFox 瀏覽器中，瀏覽器只會(huì)讀取Content-Disposition 的 filename 值，若是filename 為空，則取源文件名。此時(shí)download 無(wú)論如何都無(wú)法重置文件名。

總結(jié)一下： 未在響應(yīng)頭設(shè)置Content-Disposition 信息（例如一般直接定位資源的同源URL），download 屬性可以重置文件名。若后端在Content-Disposition 字段中已經(jīng)設(shè)置了 filename，以 filename 值為準(zhǔn)。

對(duì)于后端已經(jīng)設(shè)定了文件名的情況下，如果仍然想要對(duì)文件名進(jìn)行重置，該如何處理呢？

Blob: URL

關(guān)于download 屬性還有介紹：

盡管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用戶下載使用 JavaScript 生成的內(nèi)容（例如使用在線繪圖 Web 應(yīng)用程序創(chuàng)建的照片）。

Blob （Binary Large Object）即二進(jìn)制大對(duì)象，這個(gè)我們并不陌生，一些數(shù)據(jù)庫(kù)將Blob用來(lái)表示存儲(chǔ)二進(jìn)制文件的字段類型。File 接口也是基于 Blob，繼承了 Blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。Blob 對(duì)象通過(guò) Blob 構(gòu)造函數(shù)來(lái)創(chuàng)建：

Blob(blobParts[, options])

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});

如果需要實(shí)現(xiàn)一些簡(jiǎn)單的文本或 JS 字符串之類的文件下載，可以通過(guò)將文本信息轉(zhuǎn)成 blob 二進(jìn)制流，生成一個(gè) Blob URL，配合download 屬性完成下載，代碼如下。

const downloadText = (text, filename = '') {
  const a = document.createElement('a')
  a.download = filename
  const blob = new Blob([text], {type: 'text/plain'})  
  // text指需要下載的文本或字符串內(nèi)容
  a.href = window.URL.createObjectURL(blob) 
  // 會(huì)生成一個(gè)類似blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf 這樣的URL字符串
  document.body.appendChild(a)  
  a.click()
  a.remove()
}

這種 Blob URL 與常見的 HTTP URL 有什么區(qū)別呢？

Blob URL / Object URL是一種偽協(xié)議，可以讓Blob和File對(duì)象用作圖像和二進(jìn)制數(shù)據(jù)下載鏈接等URL源。

瀏覽器在內(nèi)部通過(guò)URL.createObjectURL() 創(chuàng)建一個(gè)對(duì) Blob 或 File 對(duì)象的特殊引用，生成的 Blob URL 只能在瀏覽器本地的單個(gè)實(shí)例和同一會(huì)話中使用，并且這個(gè) URL 對(duì)象會(huì)在頁(yè)面退出的時(shí)候被瀏覽器釋放。

因此 Blob URL并不能指向一個(gè)服務(wù)器資源 ，你無(wú)法在其它頁(yè)面中打開它。同時(shí)由于編碼格式有所差別，Blob URL 比起 Data URLs 所占的空間資源更少，性能也更好。

Blob 為 Web 開發(fā)提供了一個(gè)非常有用的功能：創(chuàng)建 Blob URL。將二進(jìn)制數(shù)據(jù)封裝為 Blob 對(duì)象，然后使用URL.createObjectURL() 生成 Blob URL，由于Blob URL本身就是一個(gè)同源URL，可以使用該 URL 配合download 解決跨域資源的下載以及命名問(wèn)題。

解決方案

通過(guò) Blob 和 Fetch 可以解決跨域和文件命名的問(wèn)題：使用fetch 獲取跨域資源返回一個(gè)blob 對(duì)象并生成一個(gè) Blob URL，配合<a> 標(biāo)簽的download 屬性觸發(fā)下載，代碼如下：

function download(href, filename = '')  {
  const a = document.createElement('a')
  a.download = filename
  a.href = href
  document.body.appendChild(a)  
  a.click()
  a.remove()
}

function downloadFile(url, filename='') {
  fetch(url, {
    headers: new Headers({
      Origin: location.origin,
    }),
    mode: 'cors',
  })
    .then(res => res.blob())
    .then(blob => {
      const blobUrl = window.URL.createObjectURL(blob)
      download(blobUrl, filename)
      window.URL.revokeObjectURL(blobUrl)
    })
}

此時(shí)再點(diǎn)擊下載，可以正常的將跨域圖片下載到本地了。

需注意的是跨域資源所在的服務(wù)器需要配置Access-Control-Allow-Origin 信息，否則會(huì)得到一個(gè)大寫的跨域報(bào)錯(cuò)。header 配置例如：

// 允許任何域名訪問(wèn)
header('Access-Control-Allow-Origin: *');

//指定域名訪問(wèn)
header('Access-Control-Allow-Origin: https://h6.ele.me');

目前這種方法還存在一些不足，例如瀏覽器會(huì)限制 Blob 數(shù)據(jù)大小不超過(guò)500M，在性能方面也會(huì)有所不足。

關(guān)于download屬性如何在HTML5中使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：download屬性如何在HTML5中使用-創(chuàng)新互聯(lián)
當(dāng)前URL：http://www.rwnh.cn/article4/dsddoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、企業(yè)建站、品牌網(wǎng)站建設(shè)、App開發(fā)、定制開發(fā)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)