注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

HTML5新属性DownLoad简介  

2013-05-03 11:40:55|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天看到蒋捷宇的一篇文章是讲html5下载属性,原文地址:http://blog.csdn.net/hfahe/article/details/8877015 。正好项目中也有类似的场景,正好拿来用。^ - ^
浏览器的支持情况:
HTML5新属性DownLoad简介 - 冰果 - 前端攻城师 郭培的博客
 
判断浏览器是否支持download属性:

if("download" in document.createElement("a")){...}

如何把代码片断保存成文件下载

<a href="" download="test.html" id="test">下载test文件</a>

document.getElementById('test').onclick = function(){
document.getElementById('test').setAttribute('href', 'data:text/html; utf-8, '+encodeURIComponent(document.body.innerHTML));
}

HTML5这个DownLoad的属性使用很简单

1. 首先,download属性是专门用在a标签的,并且a标签要设置相应的href属性,指定要下载的链接地址。

<a href="test.mp3" download>下载</a>

浏览点击链接,你就可以把test.mp3文件保存到本地了,文件名称是test.mp3。

2. 这时如果想在下载时指定保存文件的名称,可以通过下面的方式实现

<a href="test.mp3" download="你好.mp3">下载</a>

这时需要注意的是:需要指定文件的类型,如:你不能写在download="你好",否则下载时会保存成未指定格式的文件。应该写成download="你好.mp3"。

3. 你也可以通过脚本来设置链接的相应download属性

<a href="test.mp3">下载</a> $('a').attr('download','你好.mp3');

4. 如果你想做到优雅降级,你需要判断浏览器的对download的兼容情况,你可以这么做

if('download' in document.createElement('a')){

$('a').attr('download','你好.mp3');

}else{

//什么都不做

}

5. 如果后端服务器指定了文件头,指定了下载时保存文件的名称,则download的设置失效。

<a href="test.mp3" download="你好.mp3">下载</a>

对应的界面如下:
HTML5新属性DownLoad简介 - 冰果 - 前端攻城师 郭培的博客
如果把链接改成如下,需要注意在该链接中后端已经对fileName做了指定,

<a href="http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/42911654/401533401367492461128.mp3?xcode=293adba744211488803e901641c4bcae" download="你好.mp3">

所以在下载保存时名称为后端指定的fileName,download指定的属性失效
HTML5新属性DownLoad简介 - 冰果 - 前端攻城师 郭培的博客

6. 目前只有chrome 14+ 及 FF 20+ 对download支持,其中chrome兼容性比较好。FF下存在一些小问题:

<a href="test.mp3" download="你好.mp3">下载</a>

FF下的对应界面:
HTML5新属性DownLoad简介 - 冰果 - 前端攻城师 郭培的博客

链接改成如下:

<a href="http://xiaomi.media.duomi.com/dm//duomial/bTVhXzc1LzExLzEwLzMyNzMyNzAzXzUxODUtMTUxMjAwMjc=.m4a?type=0&amp;pos=1" download="你好.mp3">

下载时FF下重命名失效,如下图:
HTML5新属性DownLoad简介 - 冰果 - 前端攻城师 郭培的博客
 
Chrome下则正常

  评论这张
 
阅读(1617)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017