Download Files with Axios and Vue

vue js download file

If you need to download image or any file from url or blob in Node.jsReact.js etc then you can do it using Axios. We can also use get or post request for download file in Vue.js axios. it will also use with Laravel Vue download file.

As we know *Axios *is a very popular for http request. you can fire get, post, put etc request using Axios in Vue.js, Node.js, react js etc. But if you need same requirement to download file response from api and user to give download using Axios then how you can do that? I will help you to do file downloading using Axios.

You can see bellow peace of code for Axios request example:

axios({    
 url: 'http://localhost:8000/api/get-file',
 method: 'GET',     
 responseType: 'blob', 
}).then((response) => {
var fileURL = window.URL.createObjectURL(newBlob([response.data]));      
var fileLink = document.createElement('a');
fileLink.href = fileURL;      
fileLink.setAttribute('download', 'file.pdf'); 
document.body.appendChild(fileLink);
fileLink.click(); });

You can also see full example with Vue.js here:

Make sure you need to create your local pdf file url or you can give any live url for download.

Let’s see bellow code:

Example:

<!DOCTYPE html> 
<html> 
  <head>     
   <title>How to Download File using Axios Vue JS? -  
       blog.codehunger.in
   </title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <script   
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js" integrity="sha256-S1J4GVHHDMiirir9qsXWc8ZWw74PHHafpsHp5PXtjTs=" crossorigin="anonymous">
  </script>
</head> 
<body> 
  <div id="app">   
   <button @click="onClick()">
    DownLoad
   </button> 
  </div> 
<script type="text/javascript">     
var app = new Vue({       
el: '#app',       
methods: {           
 onClick() {               
  axios({                     
     url: 'http://localhost:8000/my.pdf',                     
      method: 'GET',                     
      responseType: 'blob',                 
   }).then((response) => {                      
     var fileURL = window.URL.createObjectURL(new 
      Blob([response.data]));                      
      var fileLink = document.createElement('a');  
      fileLink.href = fileURL;     
      fileLink.setAttribute('download', 'file.pdf');  
      document.body.appendChild(fileLink); 
      fileLink.click();                 
  });           
  }       
 }     
}) 
</script> 
</body> 
</html>

I hope it can help you..

5 1 vote
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x