Vue a-href download does not download

Question

Hey I am really new to Vue and for this project I have a DOWNLOAD BUTTON from where the users can download a file. When I click on the DOWNLOAD BUTTON it keeps on opening the file in the same browser rather downloading it. Is their a way to make a-href or button function to download the file?

My code on jsFiddle https://jsfiddle.net/ez36jmx5/10/ .

View

<div id="app">
  <a href="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" download>DOWNLOAD</a>
  <br><br>
  <button v-on:click="clickedDownload()"> <!-- opens files in new tab -->
   DOWNLOAD
  </button>
</div>

Method

new Vue({
  el: "#app",
  data: {
  
  },
  methods: {
        clickedDownload(){
        var fileName='https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
      window.open(fileName, 'Download');
    }
  }
})

This reference might be helpful for you. https://codepen.io/nigamshirish/pen/ZMpvRa — Rushi Daxini, May 07 '21 at 20:48
Are you using this script on the same domain? https://homepages.cae.wisc.edu/ — Rushi Daxini, May 07 '21 at 20:54

Rushi Daxini · Accepted Answer · 2021-05-07T21:42:49.870

In order to download the file, the image must be uploaded under the same domain where the HTML page/js is hosted.

You can create an anchor tag through JS or Vue.js and enforces to download the file.

Here is the updated working code snippet to download the file through anchor tag as well as through JS/Vue.js.

new Vue({
  el: "#app",
  data: {
  
  },
  methods: {
        clickedDownload(){
        const link = document.createElement('a');
      link.href = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
      link.setAttribute('download', 'file.png'); //or any other extension
      document.body.appendChild(link);
      link.click();
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <a href="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" download>DOWNLOAD</a>
  <br><br>
  <button v-on:click="clickedDownload()"> <!-- opens files in new tab -->
   DOWNLOAD
  </button>
</div>

The download attribute only works for same-originl URLs. So if the href is not the same origin as the site, it won't work. In other words, you can only download files that belong to that website. This attribute follows the same rules outline in the same-origin policy.

score 5 · Answer 2 · answered May 07 '21 at 21:08

window.open method opens the resource in a new tab, It won't download the file.

To download the image, Try below code. To understand more how this works, read these answers

Note: URL must accept CORS, other wise you might get CORS errors.

For the demo purpose, I've used some random image from google

  async clickedDownload(){
        const fileName = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png';
      
      try {
        const response = await fetch(fileName)
        const blob = await response.blob();
        const url = await URL.createObjectURL(blob)

        const a = document.createElement("a");
        a.href = url;
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } catch(err) {
        console.log({ err })
      }
    }

Demo link is here

score -2 · Answer 3 · answered Jul 17 '22 at 01:55

-2

Of course the resource to be downloaded must come from the same domain.

In your VueJS project, just put downloadable resources in the public folder.

Then, the html will be like this:

<a href="myFile.pdf" download>
   DOWNLOAD
</a>

answered Jul 17 '22 at 01:55

Mario Mazzola

43
6

Vue a-href download does not download

3 Answers3