Vue 2 Js Tutorial- How To Download File In Vue Js Using Axios

Vue 2 Axios File Download Tutorial

In this tutorial, we will get to understand how to download the Vue Js application using the Axios package. Even a novice would easily be able to do so since we will see how to build the file downloading feature from scratch.

 

In addition, we will learn to make the HTTP GET request to download a file in Vue Js with Axios.

Most of us already know that Axios is a promise-based HTTP client that primarily supports node.js and the browser. Some of the features of Axios are the following:

  • Cancels requests
  • Supports the Promise API
  • Makes XMLHttpRequests from the browser
  • Makes HTTP requests from node.js
  • Intercepts request and response
  • Transforms request and response data
  • Client-side support for protecting against XSRF
  • Automatic transforms for JSON data

 

How To Download File In Vue JS Using Axios

Step 1- Install Vue CLI

Step 2- Download Vue Project

Step 3- Install Axios In Vue

Step 4- Create Download File Component

Step 5- Register Download File Component

Step 6- Start Vue Application

 

Step 1- Install Vue CLI

First of all, we have to install a standard CLI tool for Vue Js development. We can easily do so since it’s available through the node package manager. We will have to do so using the below command:

npm install -g @vue/cli

 

Step 2- Download Vue Project

Further, we need to download a new Vue js app by typing the following command on the console:

vue create vue-blog

 

Then, we get inside the project folder:

cd vue-blog

 

Step 3- Install Axios In Vue

We can install the Axios library in the Vue js app since HTTP calls become quite easy with Axios:

npm install axios

 

Step 4- Create Download File Component

Afterward, we have to get into the src/components/folder and create the FileComponent.vue file and insert the following code into the src/components/FileComponent.vue file:

<template>
  <div id="app">
      <h2>Download File in Vue Js using Axios</h2>
      
      <button @click="downloadFile()">DownLoad</button>
  </div>
</template>
 
   
<script>
    import axios from 'axios';
    
    export default {
      mounted() {
          this.downloadFile();
      },
      methods: {
          downloadFile() {
              axios({
                    url: 'http://localhost:8000/demo.pdf', // File URL Goes Here
                    method: 'GET',
                    responseType: 'blob',
                }).then((res) => {
                     var FILE = window.URL.createObjectURL(new Blob([res.data]));
                     
                     var docUrl = document.createElement('x');
                     docUrl.href = FILE;
                     docUrl.setAttribute('download', 'file.pdf');
                     document.body.appendChild(docUrl);
                     docUrl.click();
                });
          }
      }
    }
</script>

 

Step 5- Register Download File Component

Then, we have to open the src/App.vue file and register the newly created component after which we will have to add the given code within the file:

<template>
    <FileComponent></FileComponent>
</template>
 
<script>
    import FileComponent from './components/FileComponent';
    
    export default {
      components: {
        FileComponent
      }
    }
</script>

 

Step 6- Start Vue Application

So, we have reached the final step of this Vue guide where we have to head over to the command-line tool and type the given command. This will run the Vue app in the browser:

npm run serve

 

Conclusion

In this Vue tutorial, we have learned to build a basic feature like downloading in the Vue js app using Axios. Hope that this tutorial was quite an easy and quick one for you to follow.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *