在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属性,都只会对图片进行预览,而不会下载;