Vue.js Download Files From URL Using Axios and Javascript Full Project For Beginners

Post author:admin
Post published:December 21, 2020
Post category:Vue
Post comments:0 Comments

Source Code

bellow code:

Example:

<!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: 'https://codingshiksha.com/wp-content/uploads/2020/12/Screenshot_37-310x199.png',
                    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>

bellow code:

Example:

<!DOCTYPE html>

<html>

<head>

<title>How to Download File using Axios Vue JS? - ItSolutionStuff.com</title>

</head>

<body>

<button @click="onClick()">DownLoad</button>

</div>

var app = new Vue({

el: '#app',

methods: {

onClick() {

axios({

url: 'https://codingshiksha.com/wp-content/uploads/2020/12/Screenshot_37-310x199.png',

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>

Source Code

Related posts:

You Might Also Like

Vue.js Mozilla PDF.js pdfvuer Module PDF Viewer Example to Display PDF Documents in Browser Using Javascript Full Project For Beginners

Build Node.js Vue.js Vuex Zoom Clone Video Chat Project Using Socket.io & WebRTC in Javascript Full Project For Beginners

Vue.js 3 PDFTron SDK Example to Build PDF Viewer & Editor to Modify Documents to Add Signature & Form Fields in JS

Leave a Reply Cancel reply