html5新属性 download
2016-04-14 22:02
381 查看
今天无意中了解到html5的新属性 download属性,在这记录一下。
一、什么是download属性?怎么应用?
我们上网,经常会遇到下载文件、图片等功能,那这个下载的功能是怎么实现的呢?基本上目前的实现方式都是后台语言实现的,例如php这样的后台语言,通过告知浏览器header信息,来实现下载。
header('Content-type:image/jpeg');
header("Content-Disposition:attachment;filename='download.jpg'");
但是随着这种前后端分离的趋势的发展,前端也可以实现下载功能了,就是利用download属性。
下面我们用一个例子来说明:我们希望点击“下载” 链接下载图片而不是浏览,直接给a标签增加一个download属性就可以了:
<a href="picture.jpg" download>下载</a>
,这样在chrome浏览器中(firefox浏览器因为跨域限制无效)就可以下载图片了,我们还可以为下载图片指定文件名称:
<a href="picture.jpg" download="logo.jpg">下载</a>
二、download 的浏览器兼容性和跨域策略
在这就Chrome浏览器和FireFox浏览器做个对比:
如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名;而FireFox浏览器下,则download属性是无效的,也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。如果资源是同域名的,则两个浏览器都是畅通无阻的下载,不会出现下载变浏览器的情况。是否支持download属性的监测要监测档期那浏览器是否支持download属性,如下方法即可:
var isSuppportDownload=‘download’ in doacument.createElement('a');
三、总结
除了图片资源,我们还可以是PDF资源,或者txt资源等等。尤其是Chrome等浏览器可以直接打开PDF文件,使得此文件格式需要download处理的场景越来越普遍。这种HTML属性虽然很实用和方便,但是兼容性制约了我们大规模的应用。同时考虑到很多时候,需要进行一些下载的统计,纯前端的方式想要保存下载量数据,还是有些困难的,需要个开发配合才行,这样一来,还不如使用传统的方式来实现。
总之,我们可以先知道这个属性,静看后事如何。
一、什么是download属性?怎么应用?
我们上网,经常会遇到下载文件、图片等功能,那这个下载的功能是怎么实现的呢?基本上目前的实现方式都是后台语言实现的,例如php这样的后台语言,通过告知浏览器header信息,来实现下载。
header('Content-type:image/jpeg');
header("Content-Disposition:attachment;filename='download.jpg'");
但是随着这种前后端分离的趋势的发展,前端也可以实现下载功能了,就是利用download属性。
下面我们用一个例子来说明:我们希望点击“下载” 链接下载图片而不是浏览,直接给a标签增加一个download属性就可以了:
<a href="picture.jpg" download>下载</a>
,这样在chrome浏览器中(firefox浏览器因为跨域限制无效)就可以下载图片了,我们还可以为下载图片指定文件名称:
<a href="picture.jpg" download="logo.jpg">下载</a>
二、download 的浏览器兼容性和跨域策略
在这就Chrome浏览器和FireFox浏览器做个对比:
如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名;而FireFox浏览器下,则download属性是无效的,也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。如果资源是同域名的,则两个浏览器都是畅通无阻的下载,不会出现下载变浏览器的情况。是否支持download属性的监测要监测档期那浏览器是否支持download属性,如下方法即可:
var isSuppportDownload=‘download’ in doacument.createElement('a');
三、总结
除了图片资源,我们还可以是PDF资源,或者txt资源等等。尤其是Chrome等浏览器可以直接打开PDF文件,使得此文件格式需要download处理的场景越来越普遍。这种HTML属性虽然很实用和方便,但是兼容性制约了我们大规模的应用。同时考虑到很多时候,需要进行一些下载的统计,纯前端的方式想要保存下载量数据,还是有些困难的,需要个开发配合才行,这样一来,还不如使用传统的方式来实现。
总之,我们可以先知道这个属性,静看后事如何。
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- User Scripts: Video Download by User Scripts
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码(html5+css3+jquery)