HTML5中Download属性的作用
想要建个受欢迎的网站？首先要理解游客们的需求！有时候，他们只想快速下载文件，特烦那种在浏览器上费劲儿找的情况。这时候，HTML5的Download属性就派上用场！它可以让浏览器自动帮我们搞定下载环节，再也不用手动操心了，对？这样一来，网站是不是就好用很多？
HTML5有个超好用的元素——Download，Chrome和Firefox都是支持的！举例子来说，如果你在网页上遇到了一份能被浏览器读懂的PDF文档，直接双击就能查看，不需要手动下载哩！只要加上Download这个属性，浏览器立马帮你把文件保存到本地并自动给它命个名，省去不少麻烦。不论是打算收藏还是想打印，随你心意就是~
Download属性的使用方法
要下东西吗？超简单！给HTML代码加个下载链接就行！就跟点保存图片一样，把href指向文件地址就成。可是有些文件比如图片、PDF、TXT和word文档等，本来浏览器里就能直接查看。那怎么让它们变成可下载的？别急，只需在服务器上设个.htaccess文件就好了。
Download属性的重命名功能
小伙伴们知道吗？除了下载，File Download还能给正在下载的文件换个名儿！比如在网上看见个特有趣的文件，但这名儿看着费劲？别急，立马让它换成好记又意思明了的新名字！不过，别忘了下载后把源文件保留下来就行，别把原有的后缀搞丢了。
点击直接下载并保存成 download.pdf 文件[object Object]
Download属性示例演示
想知道如何玩转Download属性？来看这儿吧【网址是什么】！还能看到实际操作的案例哟～
火狐浏览器就很保守，只允许你从自家网站或服务器下载。但Chrome和Opera可就不一样了，不管你下啥东西，只要不是当前网址对应的域名或服务器上的，所谓的下载设置就无效，还是遵守原先的规定！
兼容性与后备方案
其实你瞧，Safari和IE除了下载速度慢点，也还过得去！而且IE都说了会补上这项新功能。放心，虽然现在体验可能不太美妙，但我们还是想出了不少应对之策~
使用Modernizr测试Chrome特性时，遇到不能下载的问题，别担心！添加上我们特别编写的代码就能解决老旧浏览器的问题，使他们也能享受新特性，这样不管是哪种类型的浏览器，都能利用好Download属性了。对新手来说，这样的处理操作既方便又友好~
好了，言归正传，HTML5里头那个叫‘Download’的属性真心好用！它能搞定我们上传下载的文件问题，让用户用起来舒适，网页运行起来也舒畅。掌握这个小技能，不仅能解决大家的烦恼，还能提高网站的用户体验和人气哦～
if ( ! Modernizr.adownload ) {
var $link = $('a');
$link.each(function() {
var $download = $(this).attr('download');
if (typeof $download !== typeof undefined && $download !== false) {
var $el = $('').addClass('download-instruction').text('Right-click and select "Download Linked File"');
$el.insertAfter($(this));
}
});
}
。
评论0