点击直接下载并保存成 download.pdf,必威手机官网

了解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中的内容生成为指定格式的DataURL,使用方法如下:

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

我们现在需要将DataURL生成为一个png类型的图像文件,并且这个操作是在本地完成的,不需要服务器帮助生成文件。以下提供两种方法:

三个不常见的 HTML5 实用新特性简介,html5新特性

一、DNS 预解析缓存

众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。
如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单:

复制代码 代码如下:

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

淘宝网就应用了这项技术,你可以打开淘宝网,查看源代码,最顶端就把他们的一些 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 会直接在浏览器打开,mp3、mp4 等媒体直接用浏览器内置播放器播放)。但有时候,用户其实是希望直接下载而不是在浏览器上看看,这时就可以加上这个属性,属性值会对下载的文件重命名:

复制代码 代码如下:

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

如果你确定这个资源是用户肯定会下载的,就可以加上这个属性,还可以用 JS 或者手动改变想要保存的文件名。

HTML5 还有很多其他特性,但是看了很长时间书和各种资料,很少见到上面三个又比较实用的属性,拿出来分享一下。

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

HTML5 的 Download 属性用来强制浏览器下载对应文件,而不是打开。Chrome 和 Firefox 等浏览器太过于强大,也许是为了增强用户体验,当用户点击的资源文件可以被它们识别的时候(例如 pdf 会直接在浏览器打开,mp3、mp4 等媒体直接用浏览器内置播放器播放)。但有时候,用户其实是希望直接下载而不是在浏览器上看看,这时就可以加上这个属性,属性值会对下载的文件重命名:
<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 URL(RFC2397)来引用“外部”资源了。

方法一 利用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 URL!”字样。

示例

现在,我们可以通过将DataURL赋值给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.标记元素 (Mark 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 URL也是一种URL,也可以使用通用的URL转义编码:

兼容性

目前只有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 URL也可以表示二进制数据,用Base64编码即可(当然URL转义也能实现)。
下面是一个表示GIF图片的Data URL(引用自RFC2397):

方法二 修改DataURL的Mime-type

如果我们直接将获得的DataURL赋值给a标签的href属性,在点击链接后浏览器只会在新窗口打开图片,并不会直接执行下载。我们可以修改DataURL的Mime-type为octet-stream,强制让浏览器下载。

本文由必威发布于必威-前端,转载请注明出处:点击直接下载并保存成 download.pdf,必威手机官网

相关阅读