How to Download File using Axios Vue JS?

How to Download File using Axios Vue JS?

In this post we will give you information about How to Download File using Axios Vue JS?. Hear we will give you detail about How to Download File using Axios Vue JS?And how to use it also give you demo for it if it is necessary.

i will guide you to vue axios download file with example. you can download pdf file or zip file using vue js axios. if 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. we can also use get or post request for download file in vue js axios. it will also use with laravel vue download file.

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:

Also see:How to get string length in Vue JS?

<!DOCTYPE html>

<html>

<head>

<title>How to Download File using Axios Vue JS? - ItSolutionStuff.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…

Hope this code and post will helped you for implement How to Download File using Axios Vue JS?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

  +  62  =  69

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US