a 标签 图片下载

一般 a 标签下载文件的方式都是加download属性。但是对于图片下载来说，加了download的属性有时起作用，有时不起作用。

1. 如果不是远程图片(同源图片)，可以下载，参考https://www.w3school.com.cn/tiy/t.asp?f=html_a_download；

　如果是远程图片，点击下载只是打开图片而已，如下代码。

<a href="http://d.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c334c3e91cb1e4c510fd9f9a16a.jpg" download>下载</a>

2. 如果真想下载远程图片还需要加点别的东西，即"response-content-type=application/octet-stream", 加在图片url的后边即可，如下：（该方法现在不可行）

<a href="http://d.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c334c3e91cb1e4c510fd9f9a16a.jpg?response-content-type=application/octet-stream" download>下载</a>

这样远程图片就可以下载下来拉，至于为什么加这个参数能下载下来，你们可以去查查这个参数的用处哦，我也去查查，哈哈哈

3. 碰到非同源图片（远程图片）下载，需要使用js发请求去获取一遍图片，将响应内容设置成blob格式，这样获取到图片我们就可以直接下载了，代码如下：

// filepath: 图片链接
// filename: 需要下载的图片名称
onDownload(filepath, filename) {
      const x = new XMLHttpRequest()
      x.open('GET', filepath, true)
      x.responseType = 'blob'
      x.onload = function () {
        const blob = x.response
        const url = window.URL.createObjectURL(blob)
        // 判断是否是IE浏览器
        if (window.navigator.msSaveBlob) {
          try {
            window.navigator.msSaveBlob(blob, filename)
          } catch (e) {}
        } else {
          const a = document.createElement('a')
          a.href = url
          a.download = filename
          a.click()
        }
      }
      x.send()
    }