How to trigger download of a file via an HTML button using Javascript?

In this article, I will explain how can we make an HTML button in our website to trigger the download of any file using a Javascript function. This is a very important thing to know as a Developer and most of the Web Development Bootcamp and tutorials miss this.

Prerequisites:

1. Basic knowledge of HTML.

2. Basic knowledge of writing functions in Javascript.

Steps:

1. Make a simple HTML button first which will be our trigger to download any file from a website and don't forget to give it an ID so that you can catch it in your javascript function.

<button class="btn" id="submitButton"  style="cursor: pointer;">Submit</button>

1. Now take a var which can be used to target the action on the button when it is clicked.

const submit = document.getElementById('submitButton');

1. Now we have to make the magic function which will trigger a download to the user's PC when clicked on. In this function, you have to pass both the data and the name of the file whatever you want. Here I am showing an example of downloading a JSON file.

submit.addEventListener('click', function(){
    downloadJSON(data, 'MyFile');
});

1. This is a JavaScript function that allows you to download JSON data as a file. JSON stands for "JavaScript Object Notation" and is a way of storing data in a format that can be easily read and written by computer programs.

   The function takes two arguments: the JSON data that you want to download and the desired filename for the downloaded file.

   First, the function converts the JSON data to a string and creates a new Blob object that contains the data. A Blob object is a file-like object that can be used to represent data in a web browser.

   The function then creates a temporary URL for the file using the URL.createObjectURL() method. This URL is used to create a new link element that has a download attribute set to the desired filename.

   The link's href attribute is set to the temporary URL, and the function simulates a click on the link to trigger the download. Once the download is complete, the temporary URL and link element are cleaned up using the URL.revokeObjectURL() method.

function downloadJSON(data, filename) {
    // Convert the JSON data to a string
    var json = JSON.stringify(data);

    // Create a new Blob object with the JSON data and set its type
    var blob = new Blob([json], { type: 'application/json' });

    // Create a temporary URL for the file
    var url = URL.createObjectURL(blob);

    // Create a new link element with the download attribute set to the desired filename
    var link = document.createElement('a');
    link.setAttribute('download', filename);

    // Set the link's href attribute to the temporary URL
    link.href = url;

    // Simulate a click on the link to trigger the download
    document.body.appendChild(link);
    link.click();

    // Clean up the temporary URL and link element
    document.body.removeChild(link);
    URL.revokeObjectURL(url);

  };

1. You can modify this function to whatever file type you need and make it work, and I would highly encourage you to explore what is the need of blob and how it works as it is very useful for a developer. Hope this will help you to make a download button in your project.

I have made this article from my own experience and by learning from many documents and articles, if there is any mistake comment below and if you have ideas to improve this article, reach out to me. If you found my blog interesting and want to hire me, email me at fa1319673@gmail.com