Published - | Updated - January 20, 2022 09:47 am
182 Views
Hi Dev,
Today, i we will show you download file using axios in vue js. This article will give you simple example of download file using axios in vue js. you will download file using axios in vue js. In this article, we will implement a download file using axios in vue js.
So let’s follow few step to create example of download file using axios in vue js.
Example
<!DOCTYPE html>
<html>
<head>
<title>Download File using Axios In Vue JS </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" ></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 will assist you…