a标签下载图片

a标签能用做下载图片功能，主要是标签有download属性，加上download后会指示浏览器下载而不是导航。但是这个属性是HTML5属性，仅兼容版本较高的浏览器，兼容性如下：

可以看到，download属性完全不兼容ie的，所以要单独做ie的兼容

<a href="../imgs/spider-man/swiper/1.jpg" download="1.jpg" class="downBtn">下载<img src="../imgs/spider-man/download.png"></a>

$('.downBtn').on('click', function (e) {
   if (window.navigator.msSaveOrOpenBlob) {
      e.preventDefault()
      var url = $(this).attr('href')
      var name = $(this).attr('download')

      const xhr = new XMLHttpRequest()
      xhr.open('GET', url, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
          if (xhr.status === 200) {
              window.navigator.msSaveOrOpenBlob(xhr.response, name)
          }
      }
      xhr.send()
   }
})

这样就可以完美兼容ie了。

手机端的话不建议做点击下载图片的功能 ，因为微信浏览器虽然支持download属性，但经过测试当a标签加上download后，在微信浏览器点击没有任何反应，所以手机端建议直接让用户长按图片下载。

检测浏览器是否支持download属性可以这样做：

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