Download files in Javascript from Node.js server


Download files in Javascript from Node.js server

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 exposedtoAxios 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);
fileLink.setAttribute('target', '_blank');
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove();

We need to create an HTML object to be able to download the file:

<a href="" download=""></a>

Another option

Open the blob directly into browser

const response = await Axios.get('API_URL/download', { responseType: 'blob' });
const file = window.URL.createObjectURL(new Blob([response.data]));
window.open(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.

Newsletter


Related Posts

What I learned to never do in a presentation meeting

What I learned to never do in a presentation meeting. I had a very bad meeting experience with a gateway provider.

Startup graveyard is a series of killed projects that made millions in revenue per year

Startup graveyard is a series of killed projects that made millions in revenue per year. Just watch their graveyard and do it your own. What better validation do you expect.

How do you detect Credit card type based on the number?

How do you detect Credit card type based on the number using JavaScript? Simple solution using only code, no library required.

What books to read

The list of books I read. I decided one year ago to challenge myself and read as many books as I can this year. Take a look at this article and find all of them.

Startup tools for a better version

Are you a startup founder and are you looking for startup tools like invoice, planning or just making money with much automation? Check this article, from founder to founders.

How to use express validator?

How to use express validator through full examples. I found express validator very powerful, but having a poor documentation.

How to check DNS propagation

How to check DNS propagation? Did you changed the DNS records recently and now is not working? Stop crying and check the DNS propagation.

LibraPay library for Nodejs

LibraPay library for Nodejs - integrate Libra Bank online payment gateway using this library for NodeJs.

Opensource Object Storage with Minio

Opensource Object Storage with Minio using Docker. An alternative to AWS S3, Linode Storage, Google Storage, Azure Storage.

Antiatomic bunker list in Romania

I created an antiatomic bunker list in Romania shared on GitHub repo in CSV and JSON format. Check this out and build your next app using it.