href的下载属性不适用于png

Question

我正在使用download href属性来强制浏览器下载文件。它可以工作，但对于png却不起作用：

<a class="esdc-AnchorBtn save" title="Download the image file in PNG format" href="http://csaint.esac.esa.int/ftp_public/jcook022221192/CSA_CG_PREGEN_6HOUR_jcook02_20181031_154434__20060111000000.png" download=""></a>

如果添加target =“ _ blank”，则图像将在当前浏览器窗口或新标签页中呈现。

我想这是因为返回的Content-Type是“ image / png”

是否有某种方式迫使浏览器保存图像。

谢谢

Answer 1

可能会发生几件事。

但是首先，download属性仅在following conditions下起作用；

  

此属性仅适用于同源URL。 （例如：包含链接的页面必须位于域csaint.esac.esa.int上，因为该链接指向该域。）

     

尽管HTTP URL必须位于同一来源，blob：URL和数据：允许URL，以便可以下载JavaScript生成的内容，例如在图像编辑器Web应用程序中创建的图片。 （在您的情况下，您的页面是HTTPS吗？）

     

如果HTTP标头Content-Disposition：提供的文件名与此属性不同，则HTTP标头的优先级高于此属性。

     

如果Content-Disposition：设置为内联，则Firefox会像文件名一样优先处理Content-Disposition，而Chrome会优先考虑download属性。

就您的语法而言，如果您不想更改文件名，它应如下所示：

<a [...] href='example.com/image.jpg' download></a>

如果要更改文件名，那就是应该将属性设置为具有值的时间。

<a [...] href='example.com/image.jpg' download='myImage.jpg'></a>

关于浏览器的可用性，它非常好。但是有些不支持它，例如IE。您可以在此处查看详细信息：https://caniuse.com/#feat=download