js图片下载到本地

利用a标签的download属性

 <a href="https://media.xiangshengclub.com/MTU5OTQ2NDM1OTkwNyMzMTQjcG5n.png" download="name">图片下载</a>

问题

目前测试download可以直接下载的有：
xlsx表格文件
zip压缩包

目前已经遇到无法直接下载，或者不稳定是否可以下载的
在线图片
.txt文件

解决方案

将src地址字符内容转变成blob地址

<script>
  function downUrl() {
     const url ='https://media.xiangshengclub.com/MTU5OTQ2NDM1OTkwNyMzMTQjcG5n.png'
     let xmlhttp = new XMLHttpRequest()
     xmlhttp.open('GET', url, true)
     xmlhttp.responseType = 'blob'
     xmlhttp.onload = function () {
       if (this.status == 200) {
         const blob = this.response
         const link = document.createElement('a')
         link.href = window.URL.createObjectURL(blob)
         link.download = url.substring(url.lastIndexOf('/') + 1, url.length)
         //此写法兼容可火狐浏览器
         document.body.appendChild(link)
         const evt = document.createEvent('MouseEvents')
         evt.initEvent('click', false, false)
         link.dispatchEvent(evt)
         window.URL.revokeObjectURL(link.href)
         document.body.removeChild(link)
       }
     }
     xmlhttp.send()
   }
 </script>



<button class="downloadBtn" type="button" onclick="downUrl()">
  下载图片
</button>

缺点

目前只支持下载以"http" 或者 "https"请求的图片，不支持本地路径请求的图片