我们可能会想到一个最简单的方法,就是直接按钮a
标签链接一张图片,类似下面这样:
<a href="large.jpg">下载</a>
但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击下面的“下载”链接,并是不下载图片,而是在新窗口直接浏览图片。
例如,我们希望点击“下载”链接下载图片而不是浏览,直接增加一个download
属性就可以:
<a href="large.jpg" download>下载</a>
结果在Chrome浏览器下(FireFox浏览器因为跨域限制无效):
改为<a href="index_logo.gif" download="_5332_.gif">下载</a>即可
是否支持download属性的监测
要监测当前浏览器是否支持download
属性,一行JS代码就可以了,如下:
var isSupportDownload = 'download' in document.createElement('a');