Download a file

1. Use the download attribute

Adding the download attribute to a link will force the browser to download the file instead of navigating to the link.
Note that the download attribute isn't supported in IE 11.

<a href="/path/to/file" download>Download</a>

2. Trigger the click event

The idea comes from creating a link, and trigger its click event.

// Create a new link
const link = document.createElement('a'); = 'file name';
link.href = '/path/to/file';

// Append to the document

// Trigger the click event;

// Remove the element

3. Download file with generated data

It's common to download a file with dynamic data, such as

  • a JSON
  • a text
  • an image

From the data, we can turn it to a blob, then trigger the click event as described in the previous section.
The following sample code creates a blob of JSON and downloads it:

const data = JSON.stringify({ 'message': 'Hello Word' });

const blob = new Blob([data], { type: 'application/json' });

// Create new URL
const url = window.URL.createObjectURL(blob);

// Create a link and trigger the download

// Free the URL created above


Detect the dark mode
Drag to scroll