• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

详解HTML5中的download属性

CSS/HTML rin, seun 10个月前 (06-11) 97次浏览 0个评论

html download属性

html5中我们想下载一张图片,可能想到的最简单的使用a标签实现点击按钮下载图片,如下:

<a href=”图片.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>

 

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

 

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

 

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

 

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

 

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

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

喜欢 (0)

您必须 登录 才能发表评论!