Code to Print and Save HTML Page as PDF [Simple JavaScript Function]
Being web developer, many times you need to allow the user to print or save HTML page as PDF.
Suppose you have a web form on your website and the user has to submit the data. After submitting the form, you can allow the user to print or save the HTML page as a PDF with all the user data. A user can use this data for future reference.
Another example. If you have a tutorial on your website, you can allow a user to print the tutorial so that user can use it offline.
A simple solution to allow the user to print or save the HTML page as PDF will be very helpful. You don’t need any external tool to convert HTML to PDF.
Code to Print and Save HTML Page as PDF
You can call Javascript function inside the HTML.
<!DOCTYPE html>
<html>
<body>
<h2> Tutorial to print HTML page</h2>
<p>Click the button to print this page.</p>
<button onclick="printFunction()">Print</button>
<script>
function printFunction() {
window.print();
}
</script>
</body>
</html>
Here,
- The
window.print()is the inbuilt function to pint the current window. - The
printFunction()is user define javascript function which you call from HTML object.
By clicking on the button, the user can save the HTML page as PDF or can download it.
The print() function supports almost all the popular web browsers like Google Chrome, Firefox, Internet Explorer, Opera, Safari (Mac and other iOS depended web browsers).
What’s Next?
If you are a web developer or interested in web development, do check how 20 best web form design practices that have helped me grow professionally.
Javascript is one of the highest paying programming languages and has very advanced programming features.
This is a simple JavaScript function to convert HTML to PDF or to print or save HTML page as PDF. You can run this code in online HTML editor for testing.
For more of such content, stay tuned.
