print button and save as pdf in HTML and JavaScript

Estimated reading time: 2 minutes

today, we are talking about how to make print button in HTML to print elements’ contents and save them as PDF file by clicking on save as pdf in printer options. we are using HTML to writing HTML elements as div, p , article, etc, CSS to elements styling and JavaScript to script functions.
You can copy code by clicking on copy button below:
<br /> <html><br /> <head><br /> <title></title><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><br /> <script type="text/javascript"> $("#print").live("click", function () { var divContents = $("#content").html(); var printWindow = window.open('', '', 'height=400,width=800'); printWindow.document.write('<html><head><title>Contents</title>'); printWindow.document.write('</head><body >'); printWindow.document.write(divContents); printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); }); </script><br /> </head><br /> <body></p> <table id="content" class="one" cellpadding="100"> <tr> <th>name</th> <th>mobile</th> </tr> <tr> <td>Mohammed Khaled</td> <td>123456789</td> </tr> </table></div> <p><button class="print-button" id="print"><span class="print-icon"></span>print</button></p> <style> table { border-collapse: collapse; } .one { height: auto; width: 400px; border: 1px solid red; } .one tr { height: 50px; width: 100%;</p> <p>} .one tr th { border: 1px solid green; } .one tr td { text-align: center; border: 1px solid blue; } button.print-button { width: 100px; height: 100px; } span.print-icon, span.print-icon::before, span.print-icon::after, button.print-button:hover .print-icon::after { border: solid 4px #333; } span.print-icon::after { border-width: 2px; }</p> <p>button.print-button { position: relative; padding: 0; border: 0;</p> <p> border: none; background: transparent; }</p> <p>span.print-icon, span.print-icon::before, span.print-icon::after, button.print-button:hover .print-icon::after { box-sizing: border-box; background-color: #fff; }</p> <p>span.print-icon { position: relative; display: inline-block; padding: 0; margin-top: 20%;</p> <p> width: 60%; height: 35%; background: #fff; border-radius: 20% 20% 0 0; }</p> <p>span.print-icon::before { content: " "; position: absolute; bottom: 100%; left: 12%; right: 12%; height: 110%;</p> <p> transition: height .2s .15s; }</p> <p>span.print-icon::after { content: " "; position: absolute; top: 55%; left: 12%; right: 12%; height: 0%; background: #fff; background-repeat: no-repeat; background-size: 70% 90%; background-position: center; background-image: linear-gradient( to top, #fff 0, #fff 14%, #333 14%, #333 28%, #fff 28%, #fff 42%, #333 42%, #333 56%, #fff 56%, #fff 70%, #333 70%, #333 84%, #fff 84%, #fff 100% );</p> <p> transition: height .2s, border-width 0s .2s, width 0s .2s; }</p> <p>button.print-button:hover { cursor: pointer; }</p> <p>button.print-button:hover .print-icon::before { height:0px; transition: height .2s; } button.print-button:hover .print-icon::after { height:120%; transition: height .2s .15s, border-width 0s .16s; }</p> </style> <p></body><br /> </html><br />

🙏 Thank you

print button and save as pdf in HTML and JavaScript

Like this:

Leave a Reply Cancel reply

print button and save as pdf in HTML and JavaScript

Share this:

Like this:

Leave a Reply Cancel reply