This is a short guide on axios download file from url. i would like to share with you axios download file vue. you will learn axios download file to disk. we will help you to give example of vue js axios download file. Follow bellow tutorial step of laravel vue download file example.
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? - HDTuto.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>
I hope it can help you...
Do you like below Tutorials ?
- Jquery Delete Table Row on Click Event Example
- Laravel Eloquent Eager Load Count Relation Example
- Laravel Eloquent Eager Loading with Where Condition
- Laravel Eloquent Eager Loading Select Columns Example
- How to Toggle a Div on Button Click using Jquery?
- PHP Array Remove Multiple Elements by Key Example
- Laravel - How to Set Lifetime Expiration Time of Passport Access Token?
- Godaddy Shared Hosting Increase PHP Memory