欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML5 >

HTML5中的download属性详解

 

一、download属性是个什么?

如果我们想实现点击上面的下载按钮下载一张图片,你会如何实现?

 

我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片,类似下面这样:

 

<a href="large.jpg">下载</a>

 

但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击“下载”链接,并是不下载图片,而是在新窗口直接浏览图片。

 

于是,基本上,目前的实现都是放弃HTML策略,而是使用,例如php这样的后端语言,通过告知浏览器header信息,来实现下载。

 

header('Content-type: image/jpeg');

header("Content-Disposition: attachment; filename='download.jpg'");

 

然而,这种前后端都要操心的方式神烦,现在都流行前后端分离,还搅在一起太累了,感觉不会再爱了。

 

那有没有什么只需要前端动动指头就能实现下载的方式呢?有,就是本文要介绍的download属性。

 

例如,我们希望点击“下载”链接下载图片而不是浏览,直接增加一个download属性就可以:

 

<a href="large.jpg" download>下载</a>

 

没错,你没有看错,就这么结束了

 

结果在Chrome浏览器下(FireFox浏览器因为跨域限制无效):

 

不仅如此,我们还可以指定下载图片的文件名:

 

<a href="index_logo.gif" download="_5332_.gif">下载</a>

 

如果后缀名一样,我们还可以缺省,直接文件名:

 

<a href="index_logo.gif" download="_5332_">下载</a>

 

截图为虚,操作为实

 

Chrome下的截图效果示意:

 

一个大写的酷里!

 

二、浏览器兼容性和跨域策略

 

然而,caniuse展示的兼容性只是个笼统,根据鄙人的实地测试,事情要比看到的复杂。

 

主要表现在跨域策略的处理上,由于我手上没有IE13,所以,只能对比Chrome浏览器和FireFox浏览器:

 

如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名;而FireFox浏览器下,则download属性是无效的,也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。

 

而,如果资源是同域名的,则两个浏览器都是畅通无阻的下载,不会出现下载变浏览的情况。

 

是否支持download属性的监测

要监测当前浏览器是否支持download属性,一行JS代码就可以了,如下:

 

var isSupportDownload = 'download' in document.createElement('a');

 

三、结束语

 

除了图片资源,我们还可以是PDF资源,或者txt资源等等。尤其Chrome等浏览器可以直接打开PDF文件,使得此文件格式需要download处理的场景越来越普遍。

 

HTML属性虽然非常实用和方便,但是兼容性制约了我们的大规模应用。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h17730.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-02-27 09:25 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。