前端实现下载图片或文件的方法大全

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

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

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

二、通过js动态创建标记下载图片或文件

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 // 防止内存泄露
 }

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

三、使用window.open()下载文件

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

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

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

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()
}

缺点：文件过大的情况下，响应会很慢。