了解HTML/HTML5中的download属性 « 张鑫旭-鑫空间-鑫生活

了解HTML/HTML5中的download属性

这篇文章发布于 2016年04月6日，星期三，23:32，归类于 HTML相关。阅读 190429 次, 今日 10 次 68 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=5332

一、download属性是个什么鬼？

首先看下面这种截图：
下载按钮

如果我们想实现点击上面的下载按钮下载一张图片，你会如何实现？

我们可能会想到一个最简单的方法，就是直接按钮a标签链接一张图片，类似下面这样：

<a href="large.jpg">下载</a>

但是，想法虽好，实际效果却不是我们想要的，因为浏览器可以直接浏览图片，因此，我们点击下面的“下载”链接，并是不下载图片，而是在新窗口直接浏览图片。

下载

看我的眼睛，

于是，基本上，目前的实现都是放弃HTML策略，而是使用，例如php这样的后端语言，通过告知浏览器header信息，来实现下载。

header('Content-type: image/jpeg'); 
header("Content-Disposition: attachment; filename='download.jpg'");

然而，这种前后端都要操心的方式神烦，现在都流行前后端分离，还搅在一起太累了，感觉不会再爱了。

那有没有什么只需要前端动动指头就能实现下载的方式呢？有，就是本文要介绍的download属性。

例如，我们希望点击“下载”链接下载图片而不是浏览，直接增加一个download属性就可以：

<a href="large.jpg" download>下载</a>

没错，你没有看错，就这么结束了，不妨点击后面的链接试试：下载

结果在Chrome浏览器下（FireFox浏览器因为跨域限制无效）：
下载图片

不仅如此，我们还可以指定下载图片的文件名：

<a href="index_logo.gif" download="_5332_.gif">下载</a>

如果后缀名一样，我们还可以缺省，直接文件名：

<a href="index_logo.gif" download="_5332_">下载</a>

截图为虚，操作为实：下载

Chrome下的截图效果示意：
下载同时更改名称

一个大写的酷里！

二、浏览器兼容性和跨域策略

兼容性如下图：

Download属性的兼容性

然而，caniuse展示的兼容性只是个笼统，根据鄙人的实地测试，事情要比看到的复杂。

主要表现在跨域策略的处理上，由于我手上没有IE13，所以，只能对比Chrome浏览器和FireFox浏览器：

如果需要下载的资源是跨域的，包括跨子域，在Chrome浏览器下，使用download属性是可以下载的，但是，并不能重置下载的文件的命名；而FireFox浏览器下，则download属性是无效的，也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。

而，如果资源是同域名的，则两个浏览器都是畅通无阻的下载，不会出现下载变浏览的情况。
FireFox浏览器下的下载提示

是否支持download属性的监测
要监测当前浏览器是否支持download属性，一行JS代码就可以了，如下：

var isSupportDownload = 'download' in document.createElement('a');

三、结束语

除了图片资源，我们还可以是PDF资源，或者txt资源等等。尤其Chrome等浏览器可以直接打开PDF文件，使得此文件格式需要download处理的场景越来越普遍。

此HTML属性虽然非常实用和方便，但是兼容性制约了我们的大规模应用。

同时考虑到很多时候，需要进行一些下载的统计，纯前端的方式想要保存下载量数据，还是有些吃紧，需要跟开发的同学配合才行，还不如使用传统方法。

所以，download属性的未来前景在哪里？当下是否可以直接加入到实际项目？还需要我们一起好好想想。其实使用JS实现download属性的polyfill并不难，但是，考虑到为何不所有浏览器都使用polyfill的方法，又觉得为了技术而技术是不太妥当的。

总之，先放着心上，再观察观察。

补充于2017-07-04
如果需求是直接使用JS触发浏览器的下载，可以看看这篇文章：“使用JS让文本字符串作为html或JSON文件下载”。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=5332

（本篇完）

JS字符串补全方法padStart()和padEnd()简介 (0.459)
原来浏览器原生支持JS Base64编码解码 (0.459)
给IE/Edge写了个textarea resize拉伸的polyfill (0.459)
Polyfill吊炸天的CSS attr()新语法 (0.459)
巧借CSS var变量实现任意的CSS自定义语法 (0.459)
原来DOM还有toggleAttribute这样的JS API (0.459)
Safari不支持build-in自定义元素的兼容处理 (0.459)
polyfill、ponyfill、prollyfill傻傻分不清楚 (0.459)
JS前端创建html或json文件并浏览器导出下载 (0.413)
SVG <foreignObject>简介与截图等应用 (0.413)
关于《HTML并不简单》这本书 (RANDOM - 0.129)

分享到：

标签： download, html, HTML5, polyfill

发表评论（目前68 条评论）

贤海说道：

2021年06月28日 15:11

在最新的chrome浏览器下，同源下载文件，使用download属性也无法更改文件名了，请问有其他方式么

回复
AICC说道：

2021年06月23日 10:32

a标签下载无法在下载成功以后有一个提示，下载提示这一块有什么思路点拨一下的么

回复
jack说道：

2021年02月22日 10:21

如何监听下载完成呢

回复
xgqfrms说道：

2020年10月11日 12:19

# HTML5 download 执行条件

1. 同一个域名下的资源

2. http only

3. 绝对路径/相对路径都可以

回复
bob说道：

2020年03月16日 16:33

请问在webview里，这个功能不生效怎么办？比如在facebook里，想在网页生成图片并下载

回复
- 张鑫旭说道：
  
  2020年03月18日 16:02
  
  github上搜download.js
  
  回复
tests说道：

2018年11月27日 15:29

现在chrome里面，跨域资源好像不能下载了

回复
家福说道：

2018年11月7日 16:33

完整的url路径chrome 70.0.3538.77 不能下载，还没找到方法

回复
- hcc说道：
  
  2018年11月27日 09:45
  
  本地图片可以实现下载，但是完整的路径 chrome 70.0.3538.102 是打开图片，不是下载。一度怀疑自己。
  
  回复
- hcc说道：
  
  2018年11月27日 09:53
  
  应该是下面所说的造成的
  “抛开浏览器兼容性，还有几点限制：
  
  href 所指向的地址，必须与当前网站同源，否则
  
  chrome 65.0.3325.181 下测试，只能下载不能改名
  chrome 69.0.3497.92 中已经严格遵循同源策略的限制，如果加载了非同源的内容，download 属性将失效，等效导航功能。
  Firefox 61.0.1同上”
  
  回复
刘伟波说道：

2018年09月11日 15:19

如果是其他域名下的文件download就会无视

回复
chrome download属性下载MP3文件不执行下载直接打开新页播放说道：

2018年03月26日 09:37

前辈，您好我在使用a标签下载mp3 格式文件的时候为什么它并不执行下载而是直接跳到一个新的页面播放了，这种应该怎么解决啊

回复
- zxl说道：
  
  2018年04月3日 17:08
  
  你好我在新版65的chrome也遇到这个问题了，请问你解决了吗
  
  回复
  - wd说道：
    
    2018年04月19日 17:15
    
    你好，解决了吗？
    
    回复
- Leo说道：
  
  2018年04月12日 14:57
  
  我猜，是不是跨域了
  
  回复
  - Quinn说道：
    
    2018年05月24日 11:03
    
    确实是
    
    回复
- lzc说道：
  
  2018年08月8日 16:11
  
  兄弟，这个问题我也遇到了，请问你解决了吗，我试了好几个办法都不太行
  
  回复
ytxmobile说道：

2018年02月1日 13:24

Firefox可以通过打开about:config，将security.fileuri.strict_origin_policy一项的值修改为false以实现跨域下载。

回复
- 辅导辅导书说道：
  
  2018年05月11日 11:30
  
  同学你是玩单机吗….自己下载自己的东西
  
  回复
谷歌download下载出现：下载失败-网络错误说道：

2017年11月23日 10:26

谷歌浏览器通过a标签的download属性下载图片，出现下载失败-网络错误。。。前辈有没有遇到过解决过呀？求指教~~~~

回复
尼克陈说道：

2017年11月16日 15:03

棒啊又帮到我的一个需求

回复
ig 照片下載说道：

2017年11月15日 14:30

移动端统统不兼容

回复
- optme说道：
  
  2017年11月27日 16:47
  
  支持。。。。
  
  回复
静默说道：

2017年10月23日 21:41

在微信中无法使用download属性

回复
- 我也试了，是没办法的说道：
  
  2018年07月11日 14:40
  
  我也试了，是没办法的，你有什么解决方案么？
  
  回复
沈说道：

2017年07月4日 10:20

移动端（主要是安卓）怎么下载？点击没有反应

回复
- 冬瓜不圆说道：
  
  2018年05月29日 16:26
  
  我也发现了这个问题，你解决了么，ios和pc端都可以
  
  回复
Jun说道：

2017年03月28日 19:13

大神，最近在遇到一个问题，在所有浏览器都可以，但是好像safari不支持，我在stackflow搜了半天找不到解决方案，特来请教！
谢啦！
$http({
url: ‘××××××××××××××××××××××××/’,
method: “POST”,
data: {‘date’:day},
headers: {
‘Content-type’: ‘application/json’
},
responseType: ‘arraybuffer’
}).success(function (data, status, headers, config) {
var headerType = ‘application/zip’,fileType = ‘-GMT.zip’;
if(headers()[‘content-type’]==’application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’){
headerType = “application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”;
fileType = “-GMT.xlsx”;
}
var blob = new Blob([data], {type: headerType});
var objectUrl = URL.createObjectURL(blob);
var a = document.createElement(“a”);
document.body.appendChild(a);
a.download = “×××××××××××”+ day +fileType;
a.href = objectUrl;
a.click();
a.remove();
//window.open(objectUrl);
//FileSaver.saveAs(data);
}).error(function (data, status, headers, config) {
××××

});

回复
- Jun说道：
  
  2017年03月29日 14:41
  
  stackoverflow哈哈打漏了
  
  回复
Lili说道：

2017年03月15日 15:13

请问您说还不如使用传统方法那传统方法是什么？？

回复
- 小庞说道：
  
  2017年11月7日 16:39
  
  我想你要的答案就是这个吧？我也是在别的群里看到相关问题然后百度过来得，看来download还得等等普及了才能用啊。这是那个老方法得链接，你看看吧http://www.xiaoxiaohan.com/php/3.html（别人写的）
  ====来自一只小菜鸟
  
  回复
- Leo说道：
  
  2018年04月12日 14:57
  
  传统方法是设置 Http Header，Content-Disposition: attachment
  
  回复
lee说道：

2016年12月15日 16:05

火狐下载下来没有后缀怎么破

回复
llllllllllll说道：

2016年10月18日 13:25

好像是href是绝对路径就不行

回复
llllllllllll说道：

2016年10月18日 11:23

发现用了download直接点击下载，是会用原来文件名的，除非是，右键，链接另存为，才会使用download的参数做为文件名。。。

回复
- 阳阳说道：
  
  2016年10月27日 11:04
  
  同感，IE不支持，chrome和360浏览器右键，链接另存为，才会使用download的参数做为文件名；firefox是支持的
  
  回复
不知不觉说道：

2016年08月29日 17:25

在pc上确实可以下载，但是在手机上好像是在新窗口打开了图片诶，大神，这个怎么解决

回复
- jellen说道：
  
  2016年09月30日 17:02
  
  同问
  
  回复
HEarTache psR.说道：

2016年05月17日 17:51

哈哈，觉得前辈应该是个蛮开朗的逗x.
原谅对前辈如此模糊仓促的评价，学习一个技术看到了前辈发的一篇Blog，追到了这里，初看前辈头像，我擦跟老家的邻家大哥兼逗x连坐太像了。之后又看到了前辈是09集华中科技大的高材生，曾经自己无限向往并为之倾覆心血的目标。向往之久，可最后还是因为一些琐事，未能达到自己的目标成了一生的遗憾。初来乍到跟前辈打个招呼，未来会长期光顾前辈的小窝学习。啊你哦塞哟~

回复
trance说道：

2016年04月29日 15:16

我就想问问右侧一直跟着的蓝色大面包是个啥~~

回复
- zhangxinxu说道：
  
  2016年05月8日 17:13
  
  谷哥哥的广告~
  
  回复
tony说道：

2016年04月22日 15:59

想问你每次写的文章上展示的浏览器兼容性是通过什么工具去测试的？DEMO都去测过每个浏览器的兼容性吗

回复
- 张鑫旭说道：
  
  2016年04月22日 19:49
  
  caniuse.com
  
  回复
愤怒的老鸟说道：

2016年04月21日 15:19

旭哥你在慕课上面relative那个课 relative单词错了

回复
小白说道：

2016年04月20日 16:01

感觉你写的前端知识好多，我觉得有必要一个一个的全部读完。

回复
雪板烧说道：

2016年04月19日 19:06

兼容性问题始终是个大问题!

回复
- monica说道：
  
  2016年06月7日 15:54
  
  敢问download的兼容性改怎么解决啊？好苦恼
  
  回复
  - 宇说道：
    
    2016年10月11日 16:44
    
    我也觉得download 兼容性有点差，而且火狐上面，还会默认打开视频。。。
    
    回复
66666说道：

2016年04月16日 23:09

别的不说，牛逼送上

回复
不新鲜的萝卜皮说道：

2016年04月13日 17:12

发现个展示上的小问题，网站导航栏下面多了一个句号”。”

回复
- 张鑫旭说道：
  
  2016年04月13日 22:14
  
  感谢反馈！
  
  回复
aalouie说道：

2016年04月8日 23:17

我很怀念张含韵

回复
亚信朱威峰说道：

2016年04月7日 18:17

兄弟，顶你啊！最近查找东西的时候总是搜到您的这个网站，今天翻看了下，您已经坚持了六年了，光是这份毅力就了不起，在这个充满浮躁的世界里，向您致敬！您对技术日益精湛的追求，值得我们这些后备学习！

—-一个学了七年地质毕业就转行的小弟。

回复
- 阿磊说道：
  
  2016年12月16日 14:52
  
  后辈
  
  回复
土鸡价格说道：

2016年04月7日 16:23

HTML/HTML5中的download属性，没记错的话应该是加载吧

回复
- 小丫说道：
  
  2016年07月4日 11:12
  
  download的是下载的意思，onload的才是加载的意思。除开前端常识，这也是英语单词的本意。
  
  回复
小泼墨说道：

2016年04月7日 13:49

chrome，ff还好，但是在safari还有移动端的浏览器上，download兼容性还是太差

回复
gap year说道：

2016年04月7日 10:25

前段时间，我还在弄这个问题，知道了download属性的方法。不过好像兼容有问题，ie没用

回复
苏茂林说道：

2016年04月7日 10:18

很赞，可以在新的项目里试试图片的下载

回复
muzuiget说道：

2016年04月7日 10:11

第二个下载链接用 download=”” 在 Firefox 45 里还是会在浏览器打开的。

回复
- 张鑫旭说道：
  
  2016年04月7日 10:33
  
  @muzuiget 没错，后面提到了，FireFox不支持跨域下载。
  
  回复
  - 小丫说道：
    
    2016年07月4日 11:15
    
    跨域和不跨域是否指代，资源的路径和网站源码是否在同一个服务器下。原谅我对跨域这个概念不是很清楚
    
    回复
  - IE不行说道：
    
    2018年02月9日 14:45
    
    Ie直接打开了
    
    回复
Chitanda说道：

2016年04月7日 02:49

前辈这里有个小问题:第二个截图的实例代码和图上的后缀名不一样。。一个是gif一个是jpeg..开始没反应过来

回复
- 张鑫旭说道：
  
  2016年04月7日 10:31
  
  @Chitanda 不用在意这些细节，我懒得换截图。
  
  回复
  - 谷歌download下载出现：下载失败-网络错误说道：
    
    2019年04月22日 18:43
    
    大神,我在做下载的时候, 文件小的时候可以成功,文件20m以上就挂了,您遇到过么
    
    回复
    - 张鑫旭说道：
      
      2019年04月22日 20:22
      
      没
    - silence0_o说道：
      
      2019年08月14日 13:35
      
      超过了a标签herf的长度限制,可以用blob的形式导出