Нажав кнопку загрузки, чтобы загрузить изображение с 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-адрес вместо перехода к нему, поэтому пользователю будет предложено сохранить его как локальный файл.Если атрибут имеет значение, он используется в качестве предварительно заполненного имени файла в приглашении «Сохранить» (пользователь может изменить имя файла, если он хочет).Нет никаких ограничений на допустимые значения, , хотя / и \ преобразуются в подчеркивания. Большинство файловых систем ограничивают некоторые знаки препинания в именах файлов, и браузеры корректируют предлагаемое имя соответствующим образом.

Так что в спецификациях это делается, потому что в файловых системах точки и косые черты могут вызывать недопустимые имена файлов.

В вашем примере:

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