How to add Print button in HTML Page? – I write much valuable content on my multiple websites. I always wanted to add more value to my content.
Later, I came to know that many people want to download my content as a PDF and read it.
I did some research by observing the sites of other people. Some of them were using WordPress and they have plugins to do it.
But, there are so many bloggers who use blogger as a blogging platform. They do not get any plugins.
Also, using plugins in WordPress is not trusted. Sometimes it gives a loophole to the attackers and websites get crashed and destroyed by hackers.
So, I find out the script which is not even 3 lines and it worked perfectly for me.
How to add Print button in HTML Page?
You will also love to use this Print function in your HTML page. The script is suitable for all Blogspot blogs, WordPress posts, pages, and any HTML websites.
The javascript has the print function. We will use it to allow visitors to download our article as a PDF.
HTML Page Template
Here is the HTML Page Code template which contains the PDF Print button as well.
<!DOCTYPE html>
<html>
<body>
<h2>Script - Print This Page</h2>
<p>The button given below allows visitors to easily save or downlod this whole page as a PDF.</p>
<button onclick="window.print()">Click Here To Print This Page</button>
</body>
</html>
It looks like
Script – Print This Page
The button given below allows visitors to easily save or downlod this whole page as a PDF.
The button script has the print function.
<button onclick="window.print()">Click Here To Print This Page</button>
You can customize the text as Download PDF, Print, etc.
The design of the button is simple. You can write your own CSS or use Bootstrap to give easy, quick, and beautiful designs to your download button.
Print / Download Button with Bootstrap Design
Script – Print This Page
The button given below allows visitors to easily save or downlod this whole page as a PDF.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></head>
<body>
<h2>Script - Print This Page</h2>
<p>The button given below allows visitors to easily save or downlod this whole page as a PDF.</p>
<button onclick="window.print()">Click Here To Print This Page</button>
<br> </br>
<button type="button" onclick="window.print()" class="btn btn-primary">Print Primary</button>
<button onclick="window.print()" type="button" class="btn btn-secondary">Print Secondary</button>
<button onclick="window.print()" type="button" class="btn btn-success">Print Success</button>
<button onclick="window.print()" type="button" class="btn btn-danger">Print Danger</button>
<button onclick="window.print()" type="button" class="btn btn-warning">Print Warning</button>
<button onclick="window.print()" type="button" class="btn btn-info">Print Info</button>
<button onclick="window.print()" type="button" class="btn btn-light">Print Light</button>
<button onclick="window.print()" type="button" class="btn btn-dark">Print Dark</button>
<button onclick="window.print()" type="button" class="btn btn-link">Print Link</button>
</body>
</html>
Further if you want more advanced Print feature, visit the script provided by Miya.
Conclusion
The article has given scripts on How to add Print button in HTML Page? You can use these script in your Blogger, WordPress, or HTML website.
Try adding the Print button and comment your feedback.
You may like
- Happy New Year Wishing Script
- Text To Speech Converter
- Make Money Online 100 USD Per Day
- Calculate Age From Date Of Birth
- Which Blogger makes the most money?
- Guide on how to write an article
- Get Google Adsense Approval
