使用 HTML5 download 屬性建立可下載的連接

這是我參與更文挑戰的第 8 天，活動詳情查看：更文挑戰html

HTML5 引入了許多咱們平常開發常常用到的一些方便的特性。其中之一即是在 <a> 標籤上的 download 屬性。npm

默認狀況下，錨定標籤 <a> 的默認值是導航連接，它將轉到您在 href 屬性中指定的連接。瀏覽器

當您添加 download 屬性時，它表示瀏覽器應下載錨定指向的資源，而不是導航到該資源。而且你能夠向 download 屬性傳遞一個字符串值做爲可下載文件的名稱：安全

<a href="/logo.png" download>logo</a>
<!-- 下載的文件名爲 'logo' -->
<a href="/logo.png" download="logo">logo</a>
複製代碼

注意：IE 11 不支持 download 屬性。雖然不支持，但也有其專門的 polyfill 來支持在這些不支持的環境中運行該屬性。markdown

下載限制

download 屬性僅適用於相同的源 URL。所以，若是 href 與站點的來源不一樣，它將沒法工做。也就是您只能下載說該網站的文件。oop

如下爲 MDN 提示須要注意的點：post

此屬性僅適用於同源 URL。網站

儘管 HTTP URL 須要位於同一源中，可是可使用 blob: URL 和 data: URL ，以方便用戶下載使用 JavaScript 生成的內容（例如使用在線繪圖 Web 應用程序建立的照片）。google

若是 HTTP 頭中的 Content-Disposition 屬性賦予了一個不一樣於此屬性的文件名，HTTP 頭屬性優先於此屬性。spa

若是 HTTP 頭屬性 Content-Disposition 被設置爲inline（即 Content-Disposition='inline'），那麼 Firefox 優先考慮 HTTP 頭 Content-Dispositiondownload 屬性。

什麼是同源政策？

同源策略是一個重要的安全策略，它用於限制一個 origin 的文檔或者它加載的腳本如何能與另外一個源的資源進行交互。它能幫助阻隔惡意文檔，減小可能被攻擊的媒介。

也就是說，用戶只能下載來自源站點的文件。下面將給出 URL http://www.google.com/ 的源進行比對的示例：

源：`https://www.google.com/`	結果	緣由
`https://www.google.com/logo.png`	同源	只有路徑不一樣
`https://www.google.com/public/img/logo.png`	同源	只有路徑不一樣
`http://www.google.com/logo.png`	失敗	協議不一樣
`https://www.google.com:444/logo.png`	失敗	端口不一樣 ( `https://` 默認端口是 443)
`https://www.google.com/dir/logo.png`	失敗	域名不一樣