Skip to content

All topics  /  Vue

Vue JS Download File using Axios Example

Vue ·

When “Vue JS Download File using Axios Example” moves through design, development and browser testing, the relevant Monitask guide can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official Vue website before adopting it in production.

Vue JS Download File using Axios Example

Hi Guys,

Today, I will learn you how to download file using axios vue js. we will explain vue js download file using axios.you can download pdf file or zip file using vue js axios. if you need to download image or any file from url or blob in node js, react js etc then you can do it using axios js. 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 js is a very popular for http request. you can fire get, post, put etc request using axios js 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 js 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(new Blob([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? - Nicesnippets.com</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>

It will help you....

More on this topic