1、js动态创建标记下载图片或文件

注意：该方法如果下载url和访问域名不同，也会导致某些浏览器解析并打开图片，加上target="_blank"的好处，不会在原先页面上打开图片。

dom元素可以通过 .语法为其添加（标签上的属性）

  const handleDownload = (file) => {
      const url = file.url; // 图片地址
      let a = document.createElement("a"); // 创建一个a节点插入的document
      const event = new MouseEvent("click"); // 模拟鼠标click点击事件
      a.download = file.name; // 设置a节点的download属性值
      a.target = "_blank"; // 打开新窗口下载图片
      a.href = url; // 将图片的src赋值给a节点的href
      a.dispatchEvent(event); // 触发鼠标点击事件
      a = null; // 防止内存泄露
    };

function downloadImg(){
    const url = 'http://www.a.com/pic.jpg';          // 图片地址
    let a = document.createElement('a');          // 创建一个a节点插入的document
    const event = new MouseEvent('click')           // 模拟鼠标click点击事件
    a.download = '图片名字'                        // 设置a节点的download属性值
    a.target = '_blank'                           // 打开新窗口下载图片
    a.href = url;                                 // 将图片的src赋值给a节点的href
    a.dispatchEvent(event)                        // 触发鼠标点击事件
    a = null // 防止内存泄露
 }

2、利用window.open()下载文件

注意：适用于下载一些压缩包、word文件等浏览器无法解析的文件

window.open('http://www.a.com/pic.jpg', '_blank')

3、解决图片下载问题的终极方案

文件过大的情况下，响应会很慢

function downloadIamge(imgsrc, name) {
  const x = new XMLHttpRequest()
  x.open('GET', imgsrc, true)
  x.responseType = 'blob'
  x.onload = function(e) {
    var url = window.URL.createObjectURL(x.response)
    var a = document.createElement('a')
    a.href = url
    a.download = name
    a.click()
  }
  x.send()
}

4、通过a标签下载图片或文件

注意： 如果不加download属性，某些浏览器会解析并打开图片。

<a href="down.jpg" download="name" target="_blank">
</a>