Tutorial: Download file with Vue js and Axios

In this tutorial, we will help you learn how to download the file in a vue js application using the Axios package. We will show you how to build a file downloading feature from scratch. After going through this tutorial, you will be able to download a PDF document file with the help of the Axios library in the vue js app.

An application contains various essential functionalities. For example, file downloading is a fundamental feature that allows you to download an image file or a document file using the endpoint, api or url.

We will describe how to use the Axios to make the HTTP GET request to download a file in vue js with Axios. Before we dive into building file download in the Vue js feature, let us understand what Axios is?

Axios is a promise-based HTTP client that primarily supports node.js and the browser. It is built on an isomorphic paradigm, which means it runs in the browser and on nodejs with the same codebase. The server-side uses the native node.js http module, while on the client (browser), it uses XMLHttpRequests.

Here are the primary features of Axios

  • Cancel requests
  • Supports the Promise API
  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Intercept request and response
  • Transform request and response data
  • Client-side support for protecting against XSRF
  • Automatic transforms for JSON data

How to Download File in Vue Js using Axios

Step 1: Install Vue CLI Step 2: Download Vue Project Step 3: Install Axios in Vue Step 4: Create Download File Component Step 5: Register Download File Component Step 6: Start Vue Application

Install Vue CLI You need a standard cli tool for rapid vue js development, you may install it globally, and it is available through the node package manager.

Run the given below command to install the Vue CLI

npm install -g @vue/cli

Create Vue Project Next, type command on the console, run command by hitting enter to start the downloading process of a new vue js app;

You may choose the vue app version.

vue create vue-blog

Navigate to your vue.js project folder

cd vue-blog

Install Axios in Vue Handling HTTP calls is pretty effortless with Axios; let us install the Axios library in the Vue js application.

npm install axios

Create Download File Component Next, get into the src/components/ folder and create FileComponent.vue file and insert the given below code into the src/components/FileComponent.vue file.

<template>
  <div id="app">
      <h2>Download File in Vue Js using Axios</h2>

      <button @click="downloadFile()">DownLoad</button>
  </div>
</template>

<script>
    import axios from 'axios';

    export default {
      mounted() {
          this.downloadFile();
      },
      methods: {
          downloadFile() {
              axios({
                    url: 'http://localhost:8000/demo.pdf', // File URL Goes Here
                    method: 'GET',
                    responseType: 'blob',
                }).then((res) => {
                     var FILE = window.URL.createObjectURL(new Blob([res.data]));

                     var docUrl = document.createElement('x');
                     docUrl.href = FILE;
                     docUrl.setAttribute('download', 'file.pdf');
                     document.body.appendChild(docUrl);
                     docUrl.click();
                });
          }
      }
    }
</script>

Register Download File Component Now, you have to open the src/App.vue file and register the newly created component, add all the following code within the file.

<template>
    <FileComponent></FileComponent>
</template>

<script>
    import FileComponent from './components/FileComponent';

    export default {
      components: {
        FileComponent
      }
    }
</script>

Start Vue Application

npm run serve

Summary

In this bit by bit tutorial, we looked at how to build a basic feature file download in vue js using Axios. We hope this guide will help you understand this functionality better.