【2017-11-25】a标签中的download属性详解

在H5中，为a标签新增了一个download属性，来直接文件的下载；

一 : 浏览器的支持

①download属性暂时只支持Google Chrome 和 Mozilla Firefox，其他浏览器均不支持该属性；
②download是H5新增的属性，H5以前没有该属性；

---

二 : Chrome 浏览器测试

// 引用本地文件   
<a href="img/53ae64907656c.jpg">不加download属性</a>    
<p></p>
<a href="img/53ae64907656c.jpg"  download="xxx.jpg">加download属性</a>`

①在不加download属性的时候，a标签点击之后 浏览器是直接打开图片进行预览

②添加了download属性之后，a标签点击之后，浏览器会强制进行文件下载，下载的文件名就是download所命名的文件名

//引用网络地址
<a href="http://f.hiphotos.baidu.com/image/pic/item/3ac79f3df8dcd1008742b1cc788b4710b8122f0  4.jpg">不加download属性</a>
<p></p>
<a href="http://f.hiphotos.baidu.com/image/pic/item/3ac79f3df8dcd1008742b1cc788b4710b8122f04.jpg"  download="xxx.jpg">加download属性</a>

①在不加download属性的时候，浏览器会直接进行预览

②添加了download属性的时候，浏览器强制进行文件下载；

---

二 : Firefox浏览器测试

//引用本地文件
<a href="img/53ae64907656c.jpg">不加download属性</a>
<p></p>
<a href="img/53ae64907656c.jpg"  download="xxx.jpg">加download属性</a>

①在不加download属性的时候，a标签点击之后 浏览器是直接打开图片进行预览

②添加了download属性之后，a标签点击之后，浏览器会强制进行文件下载，下载的文件名就是download所命名的文件名

//引用网络地址
<a href="http://f.hiphotos.baidu.com/image/pic/item/3ac79f3df8dcd1008742b1cc788b4710b8122f04.jpg">不加download属性</a>
<p></p>
<a href="http://f.hiphotos.baidu.com/image/pic/item/3ac79f3df8dcd1008742b1cc788b4710b8122f04.jpg"  download="xxx.jpg">加download属性</a>

①在不加download属性的时候，浏览器会直接进行预览

②添加了download属性之后，火狐浏览器并没有对文件进行下载，这是因为火狐浏览器有同源限制，所以在引用网络地址的时候，不管是否添加download属性，浏览器都只会对进行预览

终结：
①a标签添加download属性之后会对文件进行强制下载，文件名就是download属性文件名；
②download只对火狐浏览器以及谷歌浏览器有效，其他浏览器无效；
③当href引用的地址是网络地址时，火狐浏览器不管是否添加download属性，都只会对图片进行预览，而不会下载；