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


Posted in HTML / CSS onMay 12, 2016

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>  

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

可以看一下这个demo地址:http://tutsplus.github.io/download-attribute/index.html

一些注意:
Firefox考虑到安全问题,该下载文件必须是从自己的服务器或域名中的,否则将在浏览器中打开。
在Chrome和Opear中,如果说下载文件不是在子集的服务器或域名中,这些浏览器会忽视download属性,换句话来说,文件名不变。

提供后备方案:
在写本文的时候,download属性并没有在Safari和IE中实现,但是IE声称,download属性的实现已经在开发日程顶部了。
HTML5中的强制下载属性download使用实例解析

在这期间,我们可以使用一个后备方案去兼容那些浏览器。我们需要去下载Modernizr的download属性特征测试。
HTML5中的强制下载属性download使用实例解析

然后添加以下脚本:

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>标签,并给予文字指引使用右键下载。
HTML5中的强制下载属性download使用实例解析

HTML / CSS 相关文章推荐
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
HTML5事件方法全部汇总
May 12 #HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 #HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 #HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 #HTML / CSS
字中字效果的实现【html5实例】
May 03 #HTML / CSS
html5需遵循的6个设计原则
Apr 27 #HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 #HTML / CSS
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
js创建对象的方式总结
2015/01/10 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Django之form组件自动校验数据实现
2020/01/14 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
《司马光》教学反思
2016/02/22 职场文书
使用scrapy实现增量式爬取方式
2022/06/21 Python