HTML5 的 Download 屬性用來強制瀏覽器下載對應(yīng)文件,而不是打開。Chrome 和 Firefox 等瀏覽器太過于強大,也許是為了增強用戶體驗,當用戶點擊的資源文件可以被它們識別的時候(例如 pdf 會直接在瀏覽器打開,mp3、mp4 等媒體直接用瀏覽器內(nèi)置播放器播放)。但有時候,用戶其實是希望直接下載而不是在瀏覽器上看看,這時就可以加上這個屬性,屬性值會對下載的文件重命名:
<a href="downloadpdf.php" download="download.pdf">點擊直接下載并保存成 download.pdf 文件</a>
如果你確定這個資源是用戶肯定會下載的,就可以加上這個屬性,還可以用 JS 或者手動改變想要保存的文件名。
在html里創(chuàng)建一個是下載鏈接是方便的,添加一個<a>標簽和指向文件的href屬性就行了。但是某些文件不會被下載(比如圖像,pdf,txt,doc),相反,他們會在瀏覽器中被打開。
如果你的站點是有服務(wù)器端的,你可以通過配置.htaccess文件來使得那些文件可以被下載。如果你的站點是被WordPress.com或者github頁面托管的(靜態(tài)頁面),那么輕考慮使用<a>標簽的download屬性
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <a href="downloadpdf.php" download="download.pdf">點擊直接下載并保存成 download.pdf 文件</a>
JavaScript Code復(fù)制內(nèi)容到剪貼板
- if ( ! Modernizr.adownload ) {
- var $link = $('a');
- $link.each(function() {
- var $download = $(this).attr('download');
- if (typeof $download !== typeof undefined && $download !== false) {
- var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
- $el.insertAfter($(this));
- }
- });
- }
這個腳本是去測試瀏覽器是否支持download屬性的,如果瀏覽器不支持的話,它就會想有download屬性的<a>標簽下面,插入一個有download-instruction類的<div>標簽,并給予文字指引使用右鍵下載。