How to force browser to download file using vue.js?

Question

I'd like to let users to download images by clicking on a download icon:

The image file is already fetched from the server and displayed:

<img  :src="currentMediaUrl">

The button is intended to force the browser to download the image above:

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

Here is what I've tried:

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

},

But it downloads a file containing the media URI instead of the very file.

How can I fix it?

Solution

That's a normal behavior, considering that you're encoding the URL itself instead of its content.

You can get desired result another way:

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

Comments

[Rishabh Batra]

Thanks a lot. I wanted to download the file on click and this helped.

[Milkyway]

Does not work. Also the class need a " at the end.

[Milkyway]

This works but not as intended. My image is displayed inside a modal gallery. I want the file just being downloaded, not being displayed instead of the modal.

[Milkyway]

Alright. Please refer to my comment on other answer on why it does not work for me.

[Sumurai8]

I am unsure what you mean. The download attribute is pretty universally supported, except for safari on iphone and internet explorer. On those browsers this will result in a (new) page being opened to display the image. You could combine it with target="_blank" to force to open a new page if download is not supported. That sounds like a reasonable trade-off to me. If you don't want to download something else, just replace currentMediaUrl. If you mean something else, I am confused by what that is.

[Milkyway]

I'm developing on Chrome browser. After adding target="_blank" to the a link, when it is clicked, the image is opened in a new tab and the active window becomes the new tab. What I want is the browser to just download the file, without displaying it.

[Sumurai8]

If you run the code snippet above and click "Download", does it download a 100x100 semi-transparent square, or does it show you an image somehow?

[Milkyway]

When I click the download link in the snippet above, it displays a dialog box, to choose whether I want to open or save myimage.png. That's not what I want. I want the browser just downloads the image quietly.

[Sumurai8]

That download dialog is a browser setting. Afaik you cannot bypass that, nor do you want to bypass that. Since the example works, I am guessing that you did not correctly implement the download link. Inspect the generated html and verify that the download attribute is on the html. Also verify that you do not have click handlers interfering with the native behaviour of the download link.

[Kunal Rajput]

In my case this works perfectly thanks