译文:HTML5 的 a 标签的 download 属性
在html
里创建一个是下载链接是方便的,添加一个<a>
标签和指向文件的href
属性就行了。但是某些文件不会被下载(比如图像,pdf,txt,doc),相反,他们会在浏览器中被打开。
如果你的站点是有服务器端的,你可以通过配置.htaccess
文件来使得那些文件可以被下载。如果你的站点是被WordPress.com或者github页面托管的(静态页面),那么轻考虑使用<a>
标签的download
属性
使用“Download”属性
download
属性是html5
规范的一部分,它表现为一个下载链接,而不是一个导航的链接。
download
属性也允许你去重命名一个需要下载的文件。比如,一个文件存放在服务器上,如果这个文件是自动生成的,一般来说它被都命名为一个系统的数字和破折号的组合,例如acme-doc-2.0.1.txt
,我们可以重命名这个下载文件的名字,用户下载后看到的文件名可以是一个比较好的名字,例如Acme Documentation (ver. 2.0.1).txt
,像这样增加用户体验(不要忘记文件的拓展名)。
代码实践:
<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>
demo地址:http://tutsplus.github.io/download-attribute/index.html
一些注意:
- Firefox考虑到安全问题,该下载文件必须是从自己的服务器或域名中的,否则将在浏览器中打开。
- 在Chrome和Opear中,如果说下载文件不是在子集的服务器或域名中,这些浏览器会忽视
download
属性,换句话来说,文件名不变。
提供后备方案:
在写这篇博客的时候,download
属性并没有在Safari和IE中实现,但是IE声称,download
属性的实现已经在开发日程顶部了。
在这期间,我们可以使用一个后备方案去兼容那些浏览器。我们需要去下载Modernizr的download
属性特征测试。
然后添加以下脚本:
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>
标签,并给予文字指引使用右键下载
。
写在最后
download
属性使用十分方便,我期待IE和Safari能尽快实现它
本文根据@ThoriqFirdaus 的 《QuickTip:UsingtheHTML5“download”Attribute》 所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/tutorials/quick-tip-using-the-html5-download-attribute–cms-23880