我们在使用链接下载图片时，浏览器会打开预览模式，没法达到我们想要的功能。

解决办法

1.使用download属性.

<a href="download.jpg" download>下载</a>

重命名

<a href="download.jpg" download="othername.jpg">下载</a>

局限性：前后端分离开发会出现跨域问题。
解决办法：
1.将原先访问图片云服务的资源改为访问网站图片资源，例如：

 <a href="http://prod.upaiyun.com/images/xxx.jpg" download="xxx.jpg">download</a>
  改为:
  <a href="http://www.mysite.com/images/xxx.jpg" download="xxx.jpg">download</a

2.配置nginx反向代理

ocation /images {
    proxy_redirect    off;
    proxy_pass https://prod.upaiyun.com;
  }

2.创建一个非跨域的数据源

1.下载原数据文件，这里可以使用img标签或者通过ajax，fetch进行下载

  function download(url, name) {
        name = name || url
        // fetch抓取图片数据
        fetch(url).then(response=> {
            if( response.status == 200 )
                // 返回的.blob()为promise，然后生成了blob对象，此方法获得的blob对象包含了数据类型，十分方便
                return response.blob()
            throw new Error(`status: ${response.status}.`)
        }).then(blob=> {
            // 获取到blob对象
            downloadFile(name, blob)
        }).catch(error=> {
            console.log("failed. cause:", error)
        })
    }

2.通过URL.createObjectURL给a标签设置数据源

function downloadFile(fileName, blob) {
       const anchor = document.getElementById("a")
       // 创建指向blob对象地址
       const src = URL.createObjectURL(blob)
       anchor.download = fileName
       anchor.href = src
}

转载于:https://blog.csdn.net/weixin_34107955/article/details/91432560
参考：https://blog.csdn.net/weixin_34393428/article/details/88012422