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