Download files in Javascript from Node.js server
Tags: tutorial, javascript, node
Published: 2021-02-01 11:40:06

---
title: Download files in Javascript from Node.js server
published: true
date: 2020-07-17 23:05:06 UTC
tags: tutorial, javascript, nodejs
canonical_url: https://boobo94.github.io/webservice/download-files-in-js-from-nodejs/
---

Download files in Javascript from the Node.js server using the Express.js framework. Hi there, long time no see. In this article, I want to show you how to download files in Javascript, either you use Vue.js, React, Angular, jQuery, or Vanilla JS. On the backend side, we run on Node.js using Express.js, and I write only the route’s handler.

## Back-end

```
import cors from 'cors';
import fs from 'fs';

.get('/download',
  cors({
    exposedHeaders: ['Content-Disposition'],
  }),
  async (req, res) => {
    try {
      const fileName = 'file.pdf'
      const fileURL = '/path/to/file/file.pdf'
      const stream = fs.createReadStream(fileURL);
      res.set({
        'Content-Disposition': `attachment; filename='${fileName}'`,
        'Content-Type': 'application/pdf',
      });
      stream.pipe(res);
    } catch (e) {
      console.error(e)
      res.status(500).end();
    }
  };
})
```

This code is all you need to download any file from the back-end. In this example, I used a `.pdf` file, but you can change the content type, on line _15._

Is very important to use CORS as middleware to determine what headers are [exposed](https://stackoverflow.com/questions/43912862/axios-expose-response-headers-content-disposition)[to](https://stackoverflow.com/questions/43912862/axios-expose-response-headers-content-disposition)[Axios](https://stackoverflow.com/questions/43912862/axios-expose-response-headers-content-disposition) library, on the front-end side. We need to set `Content-Disposition`, declared on line _1_4, to inform the client about this request which has an attachment and the filename.

## Front-end

```
import Axios from 'axios'
const response = await Axios.get('API_URL/download', { responseType: 'blob' });
if (response.data.error) {
  console.error(response.data.error)
}

const fileURL = window.URL.createObjectURL(new Blob([response.data]));
const fileLink = document.createElement('a');
fileLink.href = fileURL;
const fileName = response.headers['content-disposition'].substring(22, 52);
fileLink.setAttribute('download', fileName);
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove();
```

We need to create an `<a href="" download=""></a>` HTML object to be able to download the file.

Firstly, we need to make a request to the server, for that we use Axios. As you can see the URL is `API_URL`, your base URL and `/download` API route, defined above. Need to inform Axios, that the response waited it’s of type `blob`, because the response is not a plain text or JSON. With that response, creates a new object and attach that content on a new `a` HTML tag.

I hope you enjoy the article and it was helpful. If you have any issue or wanna add some notes, please leave me in comments bellow and I’ll try to answer as fast as possible. Please hit the like button below and share this article, it helps me a lot.

The post [Download files in Javascript from Node.js server](https://boobo94.github.io/webservice/download-files-in-js-from-nodejs/) appeared first on [boobo94](https://boobo94.github.io).