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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
css3新特性的应用示例分析
Mar 16 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设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
vue中轮训器的使用
2019/01/27 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python给list排序的简单方法
2020/12/10 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
static关键字的用法
2013/10/07 面试题
优秀党员主要事迹
2014/01/19 职场文书
特此通知格式
2015/04/27 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python