Download file using axios in vue js. In this tutorial, you will learn how to download pdf file or zip file using vue js axios.
Note that, Sometimes, 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. And can also use get or post request for download file in vue js axios.
Checkboxes are used on the page to allow the user to select multiple items from the list.
This tutorial will guide you step by step on how to get checked checkbox value in vue js app. As well as, will make a simple example of how to get checked checkbox value in vue js app using v-model.
How to Download File using Axios Vue JS?
Just follow the following steps and learn how to get checked checkbox value in vue js app with v-model:
- Step 1 – Create New VUE JS App
- Step 2 – Navigate to Vue Js App
- Step 3 – Create Component
- Step 4 – Add Component on App.vue
Step 1 – Create New VUE JS App
In this step, open your terminal and execute the following command to create new vue js app:
vue create my-app
Step 2 – Navigate to Vue Js App
In this step, open your terminal and execute the following command to enter your vue js app root directory:
cd my-app
Step 3 – Create Component
In this step, visit /src/components directory and create a new component called file-download.vue and add the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>How to Download File using Axios Vue JS? - Tutsmake.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 File</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods: {
onClick() {
axios({
url: 'http://localhost:8000/test.pdf',
method: 'GET',
responseType: 'blob',
}).then((response) => {
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
var fURL = document.createElement('a');
fURL.href = fileURL;
fURL.setAttribute('download', 'file.pdf');
document.body.appendChild(fURL);
fURL.click();
});
}
}
})
</script>
</body>
</html>
Step 4 – Add Component on App.vue
In this step, visit /src/ directory and App.vue file. And then add the following code into it:
<template>
<FileDownload></FileDownload>
</template>
<script>
import FileDownload from './components/FileDownload';
export default {
components: {
FileDownload
}
}
</script>
Conclusion
Download file using axios in vue js. In this tutorial, you have learned how to download pdf file or zip file using vue js axios.
