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 相关文章推荐
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
详解django中Template语言
2020/02/22 Python
软件工程专业推荐信
2013/10/28 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
安全标准化实施方案
2014/02/20 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
解除劳动合同证明书
2014/09/26 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
为自己工作观后感
2015/06/11 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers