App下載

html5中download使用方法?屬性方法案例分享!

猿友 2021-07-27 11:23:54 瀏覽數(shù) (6002)
反饋

今天小編和大家說說在前端中有關于:“html5中download使用方法?屬性方法案例分享!”這個問題的相關內(nèi)容,希望小編的分享對大家有所幫助!

隨著前端技術的發(fā)展,越來越多的業(yè)務場景中需要前端來處理文件下載。在眾多的方法中,通過 <a> 標簽的 download 屬性實現(xiàn)下載是其中常見也是比較簡單的一種方法。

download 屬性介紹

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

download 是 HTML5 中 <a> 標簽新增的一個屬性,此屬性會強制觸發(fā)下載操作,指示瀏覽器下載 URL 而不是導航到它,并提示用戶將其保存為本地文件,例如:

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

如果缺少 download 屬性,點擊 "download" 會直接變成預覽圖片,當添加 download 屬性后則會觸發(fā)圖片的下載。

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

瀏覽器兼容

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

動態(tài)資源下載

面對一些動態(tài)內(nèi)容下載的業(yè)務場景,即圖片等資源的地址并不是固定的(例如一些在線繪圖工具所生成的圖片),只使用 HTML 無法滿足需求。為了能夠滿足不同的 URL 下載,可以通過JS 實現(xiàn)一個動態(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()
}

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

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

測試:點擊下載,結果只是預覽而無法下載圖片。

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

文件命名問題

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

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

如果下載文件的后綴與源文件保持一致,可以設置缺省文件名:

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

筆者曾遇到過一個問題,通過 <a> 標簽觸發(fā)跨域資源下載,代碼與上述的 download 方法基本相同,只是在設置 download 屬性的地方有點不同:

a.setAttribute(download, true)

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

完成截圖

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

經(jīng)過分析,出現(xiàn)上述問題主要是因為:

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

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

前后端配合完成文件下載的業(yè)務場景,一般是由后端設置響應頭中的 Content-Disposition 信息來實現(xiàn)。

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

如果在響應頭中設置了 Content-Disposition ,前端也在對應鏈接的 <a> 標簽中添加了 download 屬性,那么此時命名規(guī)則:

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

經(jīng)過測試發(fā)現(xiàn),當 HTTP 頭中 Content-Disposition 不為空時:

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

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

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

Blob: URL

關于 download 屬性還有介紹:

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

Blob (Binary Large Object)即二進制大對象,這個我們并不陌生,一些數(shù)據(jù)庫將Blob用來表示存儲二進制文件的字段類型。File 接口也是基于 Blob,繼承了 Blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。Blob 對象通過 Blob 構造函數(shù)來創(chuàng)建:

Blob(blobParts[, options])

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

如果需要實現(xiàn)一些簡單的文本或 JS 字符串之類的文件下載,可以通過將文本信息轉成 blob 二進制流,生成一個 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) 
  // 會生成一個類似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對象用作圖像和二進制數(shù)據(jù)下載鏈接等URL源。

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

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

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

解決方案

通過 Blob 和 Fetch 可以解決跨域和文件命名的問題:使用 fetch 獲取跨域資源返回一個blob 對象并生成一個 Blob URL,配合 <a> 標簽的 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)
    })
}

此時再點擊下載,可以正常的將跨域圖片下載到本地了。

需注意的是跨域資源所在的服務器需要配置 Access-Control-Allow-Origin 信息,否則會得到一個大寫的跨域報錯。header 配置例如:

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

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

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

總結

目前前端有很多種下載方法, download 屬性下載屬于其中比較簡單的一種,不過仔細考量其中的一些特性也能挖掘出很多有用的信息。 download 與瀏覽器特性緊密相關,目前該屬性的兼容性也是一大問題,不過連微軟官方都懇求用戶不要再使用 IE ,相信以后 download 的兼容性問題會持續(xù)得到改善,應用前景也會越來越廣闊。

以上就是有關于:“html5中download使用方法?屬性方法案例分享!”這個問題的相關內(nèi)容,當然更多有關于這方面的相關內(nèi)容我們都可以在W3Cschool中進行學習和了解。 


0 人點贊