单击“下载”按钮从URL下载图像:URL中的点全部替换为下划线？

Question

我正在尝试这样做:单击“下载”按钮并从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，为什么会这样？我怎么才能修好它？

Answer 1

您误解了download属性的工作方式。来自MDN：

如果属性有一个值，它将用作保存提示符中预先填充的文件名(如果用户愿意，还可以更改文件名)。虽然/和\被转换为下划线，但对允许的值没有限制。大多数文件系统限制文件名中的标点符号，浏览器将相应地调整建议的名称。

因此，使用href属性指向文件，如果有必要，使用download属性指定当前文件名以外的文件名。

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

Answer 2

根据MDN

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

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

以你为例：

​

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

​