2

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?

Milkyway
  • 705
  • 3
  • 12
  • 25

2 Answers2

1

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>
Styx
  • 9,863
  • 8
  • 43
  • 53
0

You would do this the same way you would in normal html5, namely by using a link element, setting the download attribute and... voila!

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

In your case it would be:

<a :href="currentMediaUrl" download="myPrettyFileName.png">
  <i class="fa fa-download" aria-hidden="true"></i> 
</a>
Sumurai8
  • 20,333
  • 11
  • 66
  • 100
  • 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 Jan 09 '19 at 18:17
  • 1
    I am unsure what you mean. [The download attribute](https://caniuse.com/#feat=download) 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. – Sumurai8 Jan 09 '19 at 18:38
  • 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. – Milkyway Jan 09 '19 at 18:54
  • 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? – Sumurai8 Jan 09 '19 at 19:10
  • 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. – Milkyway Jan 09 '19 at 19:18
  • 1
    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. – Sumurai8 Jan 09 '19 at 19:58