CODEWITHSUNDEEP
javascripthtmlvue.js
Yahoo
Yahoo

Reputation: 568

Vue a-href download does not download

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');
    }
  }
})

Upvotes: 3

Views: 9284

Answers (3)

Mario Mazzola
Mario Mazzola

Reputation: 41

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>

Upvotes: -3

Rushi Daxini
Rushi Daxini

Reputation: 1700

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.

Upvotes: 7

Naren
Naren

Reputation: 4480

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

Upvotes: 6

Related Questions