点击下载按钮从网址下载图片：网址中的点都被下划线代替了？答案

【问题标题】：Clicking download button to download an image from URL: dots in the URL are all replaced by underscore?点击下载按钮从网址下载图片：网址中的点都被下划线代替了？
【发布时间】：2019-07-27 01:10:57
【问题描述】：

我正在尝试这样做：单击“下载”按钮并从 URL 下载图像。这是我的代码：

<a download="https://cdn4.iconfinder.com/data/icons/web-links/512/41-512.png" href="" title="ImageName">
  <button>download</button>
</a>

单击“下载”按钮会下载扩展名为 .png 的文件，但文件中的一些点会被下划线替换：

https___cdn4.iconfinder.com_data_icons_web-links_512_41-512.png

我想下载 png，为什么会这样？我该如何解决？

【问题讨论】：

文件名中不能有斜杠，因为这意味着一个目录，所以它们被切换为下划线
不应该是href是完整的url，而下载只是文件名
试图将图像 URL 放入 href，但它打开图像而不是下载它？

标签： javascript html image url button

【解决方案1】：

您误解了download 属性的工作原理。来自 MDN：

如果属性有值，则作为预填充的文件名在保存提示中（用户仍然可以更改文件名，如果他们想）。对允许的值没有限制，尽管 / 和 \ 是转换为下划线。大多数文件系统限制了一些标点符号文件名，浏览器会相应地调整建议的名称。

因此，使用href 属性指向文件，并在必要时使用download 属性指定一个不同于当前文件名的文件名。

<a download=my_foo.png href=path/to/foo.png />

【讨论】：

修改我的代码为<a download="test" href="https://cdn4.iconfinder.com/data/icons/web-links/512/41-512.png" title="ImageName">，新问题：点击下载按钮在浏览器中打开图片，而不是下载。
stackoverflow.com/questions/26511412/…
关于这个之前的帖子，我的理解是：由于CORS政策，无法从URL下载图片？
是的。在本地托管它或使用服务器端代理来假装它在本地托管，例如通过 PHP cURL。

【解决方案2】：

根据MDN：

此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有值，则将其用作保存提示中的预填充文件名（用户仍可以根据需要更改文件名）。允许的值没有限制，虽然 / 和 \ 被转换为下划线。 大多数文件系统限制文件名中的一些标点符号，浏览器会相应地调整建议的名称。

因此在规范中这样做，因为在文件系统中，点和斜线会导致文件名无效。

用你的例子：

<a download="512.png" href="https://cdn4.iconfinder.com/data/icons/web-links/512/41-512.png" title="ImageName">
  <button>download</button>
</a>

【讨论】：

您的代码是在浏览器中打开图片而不是下载图片吗？
它在 Edge 中为我提供了一个名为512.png的下载
我在 Chrome 中测试，在浏览器中显示图片。