let btnDownload = document.querySelector('button') ītnDownload.In previous article, we have explained about how to convert html to word using javascript or how to read pdf using Javascript or to read excel using Javascript, but in this article we will read about how to convert html into pdf using Javascript or JS easily with jsPDF library or without using any javascript library, we will see each method, one by one. As soon as this function executes, our download will start right away. saveAs() method is part of FileSaver.js and we are calling this method by passing blob and fileName as parameters.We are calling the blob() method on the res to get the Blob object.

We are making fetch request and providing url as a parameter.fileName variable holds the “My Document” string which represents our download file name. You can also specify the absolute URL if you want to. In this function, the url variable holds the location of our file which is relative to our server. startDownload() is our event handler function and it’s asynchronous.We have attached the click event listener to the element.We have selected the button element using the document.querySelector() method and stored it in btnDownload variable.Please have a look over the code example and steps given below. The HTML and CSS code is the same as shown above. Fetch API will take care of the request part and FileSaver.js will take care of downloading part. This can be achieved easily with the help of fetch API and FileSaver.js library. We need some mechanism to send a request to an absolute or relative URL and start the download. ĭownloading a pdf file on a button click requires a bit of extra work. As soon as a user clicks on the anchor element, the download will start and the pdf file will be saved as “MyDocument.pdf”. Anchor element also has download attribute and we have provided download file name as “My Document”.Anchor element has href attribute and it indicates the location of the file on our server.We have added a CDN link of FileSaver.js as well as our javascript file script.js with a script tag at the bottom.We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.The inner text for the anchor element is “Click Here” and the button element is “Download PDF”.The div element is just a wrapper for the rest of the elements. We have 3 elements in the HTML file ( div, a, and button).This file is locally stored on our server. In the following example, we have one anchor element and upon click, we want to download the test.pdf file. If you leave it as it is, then it will auto pick the file name from the value of the href attribute. In case you specify a file name, then the downloaded file will be saved with that name.

Javascript download page as pdf