Vue Js 2 Download File with Axios Example Tutorial

Vue 2 Axios File Download tutorial; In this tutorial, we will help you learn how to download the file in the 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, Vue CLI 5

• 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

Download 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

Get inside the 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()" target>DownLoad</button>
    </div>
</template>
 
   
<script>
import axios from 'axios';
export default {
    mounted() {
    },
    methods: {
        downloadFile() {
            axios({
                url: 'http://localhost:8080/demo.pdf', // Download File URL Goes Here
                method: 'GET',
                responseType: 'blob',
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Methods': ' GET, PUT, POST, DELETE, OPTIONS',
                    'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
                    'Access-Control-Allow-Credentials': 'false',
                },
            }).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>

If you are developing Axios file download functionality locally, make sure to enable the CORS using browser extension.

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.vue';
  
  export default {
    components: {
      FileComponent
    }
  }
</script>

Start Vue Application

Lastly, head over to the command-line tool, type the given command and furiously run the vue app in the browser using the provided url.

npm run serve

http://localhost:8080

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 the functionality better.