JavaScript Answers

How to force the browser to download image files on click with JavaScript?

Spread the love

To force the browser to download image files when clicked using JavaScript, you can create a link element (<a>) with the image as its href attribute and add the download attribute to it.

To do this, we write:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download Image on Click</title>
    <!-- Image to be downloaded -->
    <img id="imageToDownload" src="image.jpg" alt="Image">

        // Function to download the image when clicked
        function downloadImage() {
            // Get the image source
            var imageSrc = document.getElementById('imageToDownload').src;
            // Create a link element
            var downloadLink = document.createElement('a');
            // Set the href attribute to the image source
            downloadLink.href = imageSrc;
            // Set the download attribute to force download
   = 'image.jpg'; // Specify the filename here
            // Simulate a click on the link to trigger the download

        // Add click event listener to the image
        document.getElementById('imageToDownload').addEventListener('click', downloadImage);

In this example, we have an <img> element with the ID imageToDownload that represents the image we want to download.

We define a downloadImage() function that will be called when the image is clicked.

Inside the function, we create a new link element (<a>) programmatically using document.createElement('a').

We set the href attribute of the link to the image source and the download attribute to specify the filename.

Finally, we simulate a click on the link element using the click() method to trigger the download.

When the user clicks on the image, the browser will initiate a download of the image file with the specified filename.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *