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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 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实现智能文件类型检测的实现代码
2011/08/02 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python学习 流程控制语句详解
2016/06/01 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python修改FTP服务器上的文件名
2019/09/11 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
win10安装python3.6的常见问题
2020/07/01 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
百年校庆感言
2015/08/01 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL