Vue Js Axios File Download Component Tutorial

Vue js is a great framework; building the necessary features and functionalities in this framework is effortless. You often download files, images, audio, and video files from the websites.

But do you know how to create file downloading functionalities? If you are a novice vue js developer and want to know how to download the file in the Vue js application. So, this step-by-step guide is exclusively for you.

This tutorial will teach you how to download the file in the vue js app using the Axios HTTP client. In this Vue JS Axios download file example, we will elaborate on every required step, which will help you to learn VueJS download images and other files with Axios GET requests.

How to Download File in Vue Js with URL

  • Step 1: Set Up Vue CLI
  • Step 2: Create New Vue Js App
  • Step 3: Add Axios Package
  • Step 4: Fetch and Download File
  • Step 5: Update Component in App Js
  • Step 6: Run Development Server

Set Up Vue CLI

If you want to start app development in vue, make sure to install the vue CLI on your computer globally.

You may use the provided command start installing this standard tool.

npm install -g @vue/cli

Once the Vue CLI is properly installed, then all the vue commands are available in your terminal.

Create New Vue Js App

You can take the help of the Vue CLI command to create the new Vue app with the latest version.

Directly jump onto the next step if you have done this task in advance.

vue create vue-demo

Head over to the project folder.

cd vue-blog

Add Axios Package

In this step, you require to install the Axios package into the vue js app. Well, it is not that difficult, just execute the offered command from the command prompt of your terminal.

npm install axios

Fetch and Download File

Inside the components/ folder, we have to keep the files related to any new feature and functionalities; make sure to create a new file UserComponent.vue and update the following code.

<template>
  <div id="app">
      <h2>Vue js Axios Download File from URL Example</h2>
      <button @click="initDownload()">DownLoad</button>
  </div>
</template>ʼ
   
<script>
    import axios from 'axios';
    
    export default {
      mounted() {
          this.initDownload();
      },
      methods: {
          initDownload() {
              axios({
                    url: 'http://localhost:8000/your_file_name.pdf',
                    method: 'GET',
                    responseType: 'blob',
                }).then((res) => {
                     var FILE = window.URL.createObjectURL(new Blob([res.data]));
                     
                     var fileURL = document.createElement('x');
                     fileURL.href = FILE;
                     fileURL.setAttribute('download', 'file_name.pdf');
                     document.body.appendChild(fileURL);
                     fileURL.click();
                });
          }
      }
    }
</script>

First, import Axios from ‘axios’ to create the functions inside the methods and call it within the mounted() method.

The initDownload() function is the locus of the code where we are using the Axios() method to fetch or download the file; you need a file URL or endpoint which will be used for downloading the file.

Update Component in App Js

In this step, open the App.vue file, import the UserComponent from its location, add then call it inside the template directive as given below.

<template>
    <UserComponent></UserComponent>
</template>
 
<script>
    import UserComponent from './components/UserComponent';
    
    export default {
      components: {
        UserComponent
      }
    }
</script>

Run Development Server

You have completed all the necessary steps so far, now you have to evoke the development server.

npm run serve

The given URL appears on your terminal; just use it to serve your app on the browser.

http://localhost:8080

Vue download pdf from api

Summary

In this tutorial, we have learned how to use Axios GET request to download the file in the vue js application. So, far we have explained how to install the Axios library and use it inside the Vue js application.

Axios supports the Promise API and lets you make the HTTP calls swiftly. It is primarily useful in communicating with the backend with the help of the REST API.