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


一 : 浏览器的支持

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

add yarn 带版本 addownload_chrome

add yarn 带版本 addownload_firefox_02



二 : Chrome 浏览器测试

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

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

add yarn 带版本 addownload_chrome_03

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

add yarn 带版本 addownload_chrome_04

//引用网络地址
<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属性的时候,浏览器会直接进行预览

add yarn 带版本 addownload_chrome_05

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

add yarn 带版本 addownload_mozilla_06



二 : Firefox浏览器测试

//引用本地文件
<a href="img/53ae64907656c.jpg">不加download属性</a>
<p></p>
<a href="img/53ae64907656c.jpg"  download="xxx.jpg">加download属性</a>
①在不加download属性的时候,a标签点击之后 浏览器是直接打开图片进行预览

add yarn 带版本 addownload_firefox_07

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

add yarn 带版本 addownload_mozilla_08

//引用网络地址
<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属性的时候,浏览器会直接进行预览

add yarn 带版本 addownload_标签_09

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

add yarn 带版本 addownload_chrome_10


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