How to add Print button in HTML Page?

0
91

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.

How to add Print button in HTML Page

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.

Can I add Print Button on my blogger blog post?

Yes. You can use.

Can I use the code in HTML Static Website?

Yes.

Is the script paid or free?

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here