Download Files with Axios and Vue.js
Example How to download Files with Axios and Vue.js:
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:
<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>
