0

I am working in a simple webpage that requires to download the result as image file in the last step.

I have created a hidden HTML button for downloading result image and set its display to None by CSS. Now I have changed it's visibility from None to block using a simple JavaScript program.

My program looks something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
    #down_button
    {
        display: none;
    }
</style>
</head>
 <body>
  <h1>Press the button to start downloading</h1>
   <input type="button" id="down_button" value="Download noww !" >
    <script src="testing.js"></script>
  </body>
</html>

and my JS file looks like this:

const btn = document.getElementById('down_button');

down_button.style.display='block'; //displays the button

Is it possible to bind a URL with the button such that whenever a user press the button; the downloading will start in to the browser

Please explain with vanilla JS.

TylerH
  • 20,799
  • 66
  • 75
  • 101

2 Answers2

0

Try this if you need to download the image on button click, but be aware, Chrome 65 and above only supports same-origin download links if you use download attribute.

const link = document.createElement("a");
link.href = "image.jpg";
link.download = "download.jpg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Volodymyr
  • 91
  • 4
0

Use the HTML onClick attribute to specify the JavaScript function to run when the button is clicked. In the JS function, redirect your user to the download link. Here's how to redirect with JS.

//button HTML
<input type="button" id="down_button" value="Download noww !" onClick="download()">

//JS function
function download(){
   window.location.replace("http://stackoverflow.com");
}

Please read through those resources so you can develop an understanding of both binding functionality to a button and redirecting the browser's address.

FrontDeer
  • 28
  • 5