Как заставить браузер загружать файл, используя vue.js?

Question

Я хочу разрешить пользователям загружать изображения, нажав на значок загрузки:

Файл изображения уже получен с сервера и отображен:

<img  :src="currentMediaUrl">

Кнопка предназначена для того, чтобы заставить браузер загрузить изображение выше:

 <i @click="downloadMedia(currentMediaUrl)" class="fa fa-download"> </i> 

Вот что я пробовал:

downloadMedia(media) {
  let uriContent = "data:application/octet-stream," + encodeURIComponent(media);
  window.open(uriContent, 'neuesDokument');

},

Но он загружает файл, содержащий URI носителя, вместо самого файла.

Как я могу это исправить?

Answer 1

Это нормальное поведение, учитывая, что вы кодируете сам URL, а не его содержимое.

Вы можете получить желаемый результат другим способом:

<a :href="currentMediaUrl" download><i class="fa fa-download"></i></a>

Answer 2

Вы сделали бы это так же, как в обычном html5, а именно, используя элемент ссылки, устанавливая атрибут download и ... вуаля!

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAnElEQVR42u3RAQ0AAAgDIE1u9FvDOahAJzXFGS1ECEKEIEQIQoQgRIgQIQgRghAhCBGCECEIQYgQhAhBiBCECEEIQoQgRAhChCBECEIQIgQhQhAiBCFCEIIQIQgRghAhCBGCEIQIQYgQhAhBiBCEIEQIQoQgRAhChCAEIUIQIgQhQhAiBCEIEYIQIQgRghAhCBEiRAhChCBECEK+W0L3+TnU7375AAAAAElFTkSuQmCC"
  download="myImage.png"
  target="_blank"
>
  Download
</a>

В вашем случае это будет:

<a :href="currentMediaUrl" download="myPrettyFileName.png">
  <i class="fa fa-download" aria-hidden="true"></i> 
</a>