HTML5中的下载属性详解

2019-09-10 郑州网站建设  

一、下载属性是个什么?

如果我们想实现点击上面的download按钮download一张图片,你会怎么实现?

 

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

 

<a href=http://www.divcss5.com/html5/"large.jpg">download</a>

 

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

 

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

 

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

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

 

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

 

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

 

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

 

<a href=http://www.divcss5.com/html5/"large.jpg" 下载>download</a>

 

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

 

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

 

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

 

<a href=http://www.divcss5.com/html5/"index_标志.gif" 下载="_5332_.gif">download</a>

 

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

 

<a href=http://www.divcss5.com/html5/"index_标志.gif" 下载="_5332_">download</a>

 

截图为虚,操作为实

 

Chrome下的截图效果示意:

 

一个大写的酷里!

 

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

 

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

 

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

 

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

 

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

 

是否支持下载属性的监测

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

 

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

 

三、结束语

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1785.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • 属性
  • е
  • download