先是看上面这种截图

了解HTML/HTML5中的download属性

2016/04/07 · HTML5 · 5
评论 ·
download

原来的文章出处:
张鑫旭(@张鑫旭)   

生龙活虎、download属性是个怎样鬼?

第生龙活虎看下边这种截图:
图片 1

假定大家想达成点击上边的下载按钮下载一张图纸,你会怎样贯彻?

咱俩或者会想到一个最轻巧易行的主意,正是直接按钮a标签链接一张图纸,雷同下边那样:

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

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

但是,主见虽好,实际效果却不是大家想要的,因为浏览器可以一向浏览图片,因而,大家点击下边的“下载”链接,并是不下载图片,而是在新窗口直接浏览图片。

下载

看本身的眸子,图片 2

于是乎,基本上,近年来的兑现都以割舍HTML战略,而是选择,比方php那样的后端语言,通过报告浏览器header消息,来促成下载。

header(‘Content-type: image/jpeg’); header(“Content-Disposition:
attachment; filename=’download.jpg'”);

1
2
header(‘Content-type: image/jpeg’);
header("Content-Disposition: attachment; filename=’download.jpg’");

而是,这种光景端都要顾虑的措施神烦,今后都流行前后端分离,还搅在联合签字太累了,认为不会再爱了。

那有未有哪些只要求前端动动手指就能够完成下载的点子吗?有,正是本文要介绍的download属性。

比如,大家期待点击“下载”链接下载图片实际不是浏览,直接扩大三个download性情就可以:

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

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

确实无疑,你未有看错,就那样截止了,不要紧点击后边的链接试试:下载

结果在Chrome浏览器下(FireFox浏览器因为跨域约束无效卡塔 尔(阿拉伯语:قطر‎:
图片 3

不止如此,大家还足以内定下载图片的公文名:

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

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

假若后缀名同样,大家还是能够缺省,直接文件名:

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

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

截图为虚,操作为实:下载

Chrome下的截图效果暗暗表示:
图片 4

二个大写的酷里!

三、结束语

除了这几个之外图片能源,大家还足以是PDF财富,大概txt能源等等。特别Chrome等浏览器可以平素展开PDF文件,使得此文件格式供给download拍卖的景观更宽广。

此HTML属性就算极其实用和造福,然而包容性制约了我们的广阔使用。

再者思量到无数时候,供给举办部分下载的总括,纯前端的议程想要保存下载量数据,如故有个别吃紧,供给跟开辟的同室合营才行,还不比选择守旧艺术。

所以,download天性的前程前程在哪儿?当下是否能够一直投入到骨子里项目?还亟需我们协同可以盘算。其实使用JS达成download属性的polyfill并简单,不过,寻思到为什么不持有浏览器都选取polyfill的方式,又感到为了才能而技巧是不太稳妥的。

一言以蔽之,先放着心上,再观望观望。

1 赞 3 收藏 5
评论

图片 5

二、浏览器包容性和跨域战略

图片 6

只是,caniuse浮现的包容性只是个笼统,依据鄙人的真切测量检验,事情要比来看的复杂。

非常重要表未来跨域战略的管理上,由于自己手上未有IE13,所以,只可以比较Chrome浏览器和FireFox浏览器:

倘使必要下载的财富是跨域的,包罗跨子域,在Chrome浏览器下,使用download天性是可以下载的,可是,并不能够重新初始化下载的公文的命名;而FireFox浏览器下,则download质量是对事情未有什么帮助的,也正是FireFox浏览器无论怎样都不援救跨域能源的download品质下载。

而,尽管财富是同域名的,则七个浏览器都以直通的下载,不会鬼使神差下载变浏览的景况。
图片 7

是或不是援助download属性的监测
要监测当前浏览器是或不是援助download品质,生机勃勃行JS代码就足以了,如下:

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

1
var isSupportDownload = ‘download’ in document.createElement(‘a’);

相关文章