元素的标准中提供了,已经支持用Data URL(RFC23

了解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

多个大写的酷里!

【Data URL】

筹划干活

想要将canvas成分当前展现的内容生成为图像文件,大家先是要赢得canvas中的数据,在HTML5 <canvas>要素的正统中提供了toDataURL()的章程能够将canvas中的内容生成为钦赐格式的DataUSportageL,使用方式如下:

// 假设有一个id为cvs的canvas元素
var dataurl = document.getElementById('cvs').toDataURL('image/png');

作者们以后内需将DataU本田UR-VL生成为多个png类型的图像文件,何况那几个操作是在本地达成的,无需服务器扶助生成文书。以下提供二种办法:

多少个不布满的 HTML5 实用新特点简要介绍,html5新特点

后生可畏、DNS 预解析缓存

明确,解析 DNS 是网站品质优化的可比关键的后生可畏部分,就算加载时间不太长,不过很难压缩起来。非常是为了并发下载财富而使用八个CDN 域名来加载财富的大型网址,更不得忽视,每加载能源在此以前都要先进行 CDN 域名的 DNS 拆解深入分析转变。
假诺接受 DNS 预加载,援救该意义的浏览器就能提前对该域名进行 DNS 剖析况且缓存一下,而不会在急需要求能源再进行解析。并且那些成效应用实乃太轻松:

复制代码 代码如下:

<link rel="dns-prefetch" href=";
<link rel="dns-prefetch" href="//www.google-analytics.com">

Tmall网就利用了这项手艺,你能够展开Tmall网,查看源代码,最上部就把她们的有个别CDN 服务器举行了 DNS 拆解剖判缓存。

二、能源预加载

财富预加载有相当多格局,举例恒河沙数的图片预加载,有利用 CSS 的背景图片来预加载,大部分依旧用 JS。前段时间 HTML5 提供了特意的能源预加载方法,有多个特性:prefetch(预读取卡塔 尔(阿拉伯语:قطر‎和 prerender(预渲染卡塔 尔(阿拉伯语:قطر‎,分别被 Firefox 和 Chrome 浏览器帮衬。

1).PREFETCH 预读取
预读取正是很广阔的财富预加载,当前页面加载成功今后,就能在背后偷偷的下载你钦赐的资源,平日是 JS 、CSS 和 图片 那类的,也得以下载页面:

复制代码 代码如下:

<link rel="prefetch" href="" />
<link rel="prefetch" href="" />
<link rel="prefetch alternate stylesheet" href="mozspecific.css" />

留意,最近 Firefox 浏览器协助那几个效应。

2).PRERENDER 预渲染
这么些更决定了,不止偷偷的超前下载,何况还给你渲染出来,当客商点击链接的时候,立即给您表现出来。

复制代码 代码如下:

<link rel="prerender" href="" />

注意,近日 Chrome 帮忙那个作用。

搜素引擎其实是最急需这种预读取的法力的,因为他俩极度确定顾客下一步要开荒的页面(寻觅结果页面卡塔 尔(阿拉伯语:قطر‎,所以当客商输入找出内容的时候,就足以提前把寻觅结果页面包车型客车能源提前加载,并且选取之后,效果特别明显。

近来包容性是个毛病,貌似独有 Chrome 和 Firefox 匡助,并且用的 rel 属性是莫衷一是的,假若您想同期包容多少个浏览器,能够写成下边那样:

复制代码 代码如下:

<link rel="prefetch prerender" href="" />

除此以外,当然为了安全无法跨域预加载财富,大概没办法用在 CDN 了。

三、Download 属性

HTML5 的 Download 属性用来强制浏览器下载对应文件,并不是展开。Chrome 和 Firefox 等浏览器太过分强盛,只怕是为了升高客商体验,当客户点击的能源文件能够被它们识其余时候(比如pdf 会直接在浏览器展开,mp4、DVD等媒体平昔用浏览器内置播放器播放卡塔 尔(英语:State of Qatar)。但一时,客商实际是可望直接下载并非在浏览器上看看,此时就足以增进那脾天性,属性值会对下载的文件重命名:

复制代码 代码如下:

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>

意气风发旦你规定这么些能源是客户显著会下载的,就足以加上那几个天性,还是能用 JS 也许手动更改想要保存的文书名。

HTML5 还应该有好些个别样特色,不过看了不长日子书和各类材质,少之又少见到下边四个又相比实用的习性,拿出来分享一下。

HTML5中的强制下载属性download使用实例解析,html5download

HTML5 的 Download 属性用来强制浏览器下载对应文件,并非开辟。Chrome 和 Firefox 等浏览器太过于强大,可能是为了提升顾客体验,当客户点击的财富文件能够被它们识其他时候(比方pdf 会直接在浏览器张开,mp4、DVD等媒体一向用浏览器内置播放器播放卡塔 尔(英语:State of Qatar)。但不经常,顾客实际是指望间接下载并不是在浏览器上看看,那时就足以加多那几个天性,属性值会对下载的文件重命名:
<a href="downloadpdf.php" download="download.pdf">点击直接下载并保留成 download.pdf 文件</a>
设若您规定这一个财富是顾客肯定会下载的,就足以加上那么些天性,还是可以用 JS 或然手动改动想要保存的文本名。
在html里创造三个是下载链接是平价的,增多一个<a>标签和针对文件的href属性就能够了。可是一些文件不会被下载(例如图像,pdf,txt,doc卡塔尔,相反,他们会在浏览器中被展开。
假诺您的站点是有劳动器端的,你能够透过配置.htaccess文件来驱动那一个文件能够被下载。如若你的站点是被WordPress.com或然github页面托管的(静态页面卡塔尔,那么轻考虑接收<a>标签的download属性

使用“Download”属性 download属性是html5专门的学业的一片段,它显示为叁个下载链接,实际不是一个导航的链接。
download属性也允许你去重命名八个内需下载的公文。比方,多少个文本存放在服务器上,如若这几个文件是自动生成的,经常的话它被都命名称叫八个连串的数字和破折号的构成,比如acme-doc-2.0.1.txt,大家得以重命名这一个下载文件的名字,客商下载后来看的文件名能够是一个相比较好的名字,举例Acme Documentation (ver. 2.0.1).txt,像这么扩张顾客体验(不忘记文件的进展名卡塔 尔(阿拉伯语:قطر‎。

XML/HTML Code复制内容到剪贴板

  1. <a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>  

图片 5

能够看一下以此demo地址:

有些在意: Firefox考虑到安全难点,该下载文件必得是从自个儿的服务器或域名中的,不然就要浏览器中展开。
在Chrome和Opear中,如若说下载文件不是在子集的服务器或域名中,那一个浏览器会忽略download属性,换句话来讲,文件名不改变。

提供后备方案: 在写本文的时候,download属性并从未在Safari和IE中落到实处,但是IE声称,download属性的落实已经在支付日程最上端了。
图片 6

在此面,大家得以使用贰个后备方案去宽容那么些浏览器。大家需求去下载Modernizr的download属性特征测量试验。
图片 7

下一场增多以下脚本:

JavaScript Code复制内容到剪贴板

  1. if ( ! Modernizr.adownload ) {   
  2.     var $link = $('a');   
  3.     $link.each(function() {   
  4.         var $download = $(this).attr('download');   
  5.         if (typeof $download !== typeof undefined && $download !== false) {   
  6.       var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');   
  7.       $el.insertAfter($(this));   
  8.         }   
  9.     });   
  10. }  

以此脚本是去测验浏览器是还是不是援救download属性的,假如浏览器不扶植的话,它就能够想有download属性的<a>标签下边,插入二个有download-instruction类的<div>标签,并授予文字引导使用右键下载。
图片 8

HTML5 的 Download 属性用来强制浏览器下载对应文件,并不是开辟。Chrome 和 Firefox 等浏...

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

图片 9

只是,caniuse展示的宽容性只是个笼统,依据鄙人的实实在在测量检验,事情要比看到的复杂。

首要呈现在跨域战术的管理上,由于自家手上未有IE13,所以,只好相比Chrome浏览器和FireFox浏览器:

固然须要下载的财富是跨域的,包涵跨子域,在Chrome浏览器下,使用download品质是能够下载的,不过,并无法重新载入参数下载的公文的命名;而FireFox浏览器下,则download属性是低效的,也便是FireFox浏览器不论怎么样都不扶植跨域财富的download属性下载。

而,借使财富是同域名的,则多少个浏览器都以直通的下载,不会冒出下载变浏览的场馆。
图片 10

是不是扶植download属性的监测
要监测当前浏览器是或不是帮助download属性,风流罗曼蒂克行JS代码就足以了,如下:

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

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

最新的HTML5浏览器中,已经协助用Data UENCOREL(奥迪Q3FC2397卡塔 尔(英语:State of Qatar)来引用“外部”财富了。

方法一 利用HTML5 <a>标签的download属性

在HTML5标准中,<a>标签具备一个新的习性download,download属性用来指明该超链接指向的对象是相应被下载的文本,譬如

<a href="http://www.jianshu.com" download>下载</a>

download属性能够被赋值,用来指明下载文件的名号,比如

<a href="http://www.jianshu.com" download="index.html">下载</a>

HTML5都有什新特点?

骨子里说,HTML5正是html、css、js的结合体,不用小题大做的。还应该有一方面是HTML5还不是很成熟,决议于浏览器的支撑程度。至于HTML5的新天性,有若干点,比方说在那之中的canvas绘图,新增添的api包涵:canvas,geolocation ,websocket , webstorage;还会有新扩充的多少标签,如video,audio标签。  

三、结束语

除外图片能源,我们还足以是PDF能源,也许txt财富等等。特别Chrome等浏览器能够一贯展开PDF文件,使得此文件格式需求download拍卖的光景更是广泛。

此HTML属性纵然十一分实用和有支持,可是宽容性制约了大家的遍布利用。

并且考虑到无数时候,要求展开一些下载的总括,纯前端的议程想要保存下载量数据,照旧有些吃紧,要求跟开荒的同学合作才行,还不比选拔守旧办法。

所以,download天性的前途前程在何地?当下是否能够直接踏向到骨子里项目?还亟需大家一同能够构思。其实使用JS实现download属性的polyfill并简单,但是,考虑到为什么不具有浏览器都采用polyfill的情势,又感觉为了技术而技艺是不太妥帖的。

一句话来讲,先放着心上,再观看观望。

1 赞 3 收藏 5 评论

图片 11

比方下边包车型大巴链接,在HTML5浏览器中式点心击后,会转到四个新页面,展现“Hello Data U冠道L!”字样。

示例

明日,大家得以因而将DataUEvoqueL赋值给a标签的href属性,並且利用download属性使其变化为可下载的图样。

var dataurl = document.getElementById('cvs').toDataURL('image/png');
var a = document.createElement('a');
a.href = dataurl;
a.download = "sample";
a.click();

简诉html5的新特色及事后的进步景色

1.新的文书档案类型 (New Doctype)
2.脚本和链接不需求type (No More Types for Scripts and Links)
3.语义Header和Footer (The Semantic Header and Footer)
4.Hgroup
5.标志成分 (马克 Element)
6.图形元素 (Figure Element)
7.重新定义<small> (Small Element redefined)
8.占位符 (Placeholder)
9.供给属性 (Required Attribute)
10.Autofocus 属性 (Autofocus Attribute)
11.Audio 支持 (Audio Support)
12.Video 支持 (Video Support)
13.录像预载 (Preload attribute in Videos element)
14.出示调节条 (Display Controls)
15.标准表达式 (Regular Expressions)  

HTML5 实用新特征简要介绍,html5新特征 生机勃勃、DNS 预深入分析缓存 人所共知,分析 DNS 是网址质量优化的超重大的朝气蓬勃有的,即便加载时...

[html] 
<a href="data:text/plain,Hello Data URL!">Hello</a> 
假定文本内容富含特殊字符如何做?Data U奥迪Q7L也是豆蔻梢头种UHavalL,也足以运用通用的UEnclaveL转义编码:

兼容性

当前独有Chrome和FireFox帮助download属性

[html] 
<a href="data:text/html;charset=utf8,%3Ch1%3E%E4%BD%A0%E5%A5%BD%3C/h1%3E">URL escaped</a> 
地点的事例都以纯文本数据。其实Data U本田CR-VL也得以象征二进制数据,用Base64编码就能够(当然U汉兰达L转义也能兑现卡塔尔。
下边是一个意味GIF图片的Data U安德拉L(引用自PRADOFC2397卡塔尔国:

方法二 修改DataURL的Mime-type

即便我们向来将得到的DataU汉兰达L赋值给a标签的href属性,在点击链接后浏览器只会在新窗口张开图片,并不会一直执行下载。我们能够校正DataU奥迪Q7L的Mime-type为octet-stream,强制让浏览器下载。

本文由必威发布于必威-前端,转载请注明出处:元素的标准中提供了,已经支持用Data URL(RFC23

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。