If you need to trigger a download programmatically—perhaps after an AJAX call or when the image URL is generated on the fly—you can use jQuery to create and click a hidden anchor element. javascript
: The download attribute instructs the browser to download the linked file instead of navigating to it. download image on button click using jquery
How to Download an Image on Button Click Using jQuery Implementing a feature to download an image with a single button click—rather than just opening it in a new tab—is a common requirement for modern web applications. While standard HTML can sometimes handle this, using offers more control, especially for dynamic URLs or cross-origin content. Method 1: The Simple HTML5 "Download" Attribute If you need to trigger a download programmatically—perhaps
$('#download-btn').on('click', function() { var imageUrl = "https://example.com"; var fileName = "downloaded_image.png"; // Create a temporary hidden anchor element var $tempLink = $(''); $tempLink.attr('href', imageUrl); $tempLink.attr('download', fileName); // Append to body, click it, then remove it $('body').append($tempLink); $tempLink[0].click(); $tempLink.remove(); }); Use code with caution. Method 3: Handling External URLs (Cross-Origin) HTML a download Attribute - W3Schools While standard HTML can sometimes handle this, using
: This generally only works for "same-origin" files (images hosted on the same domain as your website). Method 2: Dynamic Download with jQuery