近日有个需求需要下载协议照片，使用的是阿里云的oss，由于无法协调后端那边配置跨域响应头，找了很多方案都不理想，终于在摸索下可以实现完美下载

常见方案有两个问题 1.图片格式(png,jpg等)不会触发下载，直接打开预览 2.跨域问题

先捋一下常见方案

a标签html5版本新增了download属性，用来告诉浏览器下载该url，而不是导航到它，可以带属性值，用来作为保存文件时的文件名，尽管说有同源限制，但是我实际测试时非同源的也是可以下载的。

对于没有设置Content-Disposition响应头或者设置为inline的图片来说，因为图片对于浏览器来说是属于能打开的文件，所以并不会触发下载，而是直接打开，浏览器不能预览的文件无论有没有Content-Disposition头都会触发保存：

所以说如果想用a标签下载图片，那么要让后端加上Content-Disposition响应头，另外也必须以流的形式返回，跨域图片符合这个要求也可以下载，即使响应没有允许跨域的头，但是静态图片即使添加了这个头也是直接打开：

和a标签方式类似的还可以使用location.href：

行为和a标签完全一致。

这两种方式的缺点也很明显，一是不支持post等其他方式的请求，二是需要后端支持。

a标签支持data:协议的URL，利用这个可以让后端返回base64格式的字符串，然后使用download属性进行下载：

这个方式就随便get还是post请求了，缺点是base64字符串可能会非常大，传输慢以及浪费流量，另外当然也得后端支持，需要同域或允许跨域。

还是a标签，它还支持blob:协议的URL，利用这个可以把响应类型设置为blob，然后和base64一样扔给a标签：

这个方式需要和上述几个需要通过ajax请求的一样，都需要后端可控，即图片同域或支持跨域。

这个方法其实和方法二和方法三是类似的，只是相当于把图片请求方式换了一下：

img标签是可以跨域的，但是跨域的图片绘制到canvas里后无法导出，浏览器会报错，可以给img添加crossOrigin属性，但是，如果图片没有允许跨域的头加了也没用。

对于post请求方式下载图片的话，除了使用上述的方法二和方法三之外，还可以使用form表单：

使用该方式，图片流的响应头需要设置Content-Disposition，否则浏览器也是直接打开图片，有该响应头的话跨域图片也可以下载，即使图片不允许跨域。

方法六、ifrmae下载 document.execCommand有一个SaveAs命令，可以触发浏览器的另存为行为，利用这个可以把图片加载到iframe里，然后通过iframe的document来触发该命令：

图片必须要是同源的，这种方式了解一下就行，因为它只在IE里被支持。