href 的下载属性不适用于 png答案

【问题标题】：download attribute for href doesn't work for pnghref 的下载属性不适用于 png
【发布时间】：2019-04-04 20:31:43
【问题描述】：

我正在使用下载 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”

有没有办法强制浏览器保存图片。

谢谢

【问题讨论】：

标签： html download href

【解决方案1】：

可能会发生一些事情。

但首先，download 属性仅适用于following conditions；

此属性仅适用于同源 URL。（例如：带有链接的页面必须在域 csaint.esac.esa.int 上，因为这是 hte 链接指向的位置。）

虽然 HTTP(s) URL 需要同源，但 blob: URL 和 data: URL 是允许的，以便可以下载由 JavaScript 生成的内容，例如在图像编辑器 Web 应用程序中创建的图片。（在您的情况下，您的页面是 HTTPS 吗？）

如果 HTTP 标头 Content-Disposition: 给出的文件名与此属性不同，则 HTTP 标头优先于此属性。

如果 Content-Disposition: 设置为内联，Firefox 会优先考虑 Content-Disposition，就像文件名大小写一样，而 Chrome 会优先考虑下载属性。

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

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

如果要更改文件名，则应将属性设置为具有值。

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

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

【讨论】：