Convert HTML Table to PDF

Kailash Chandra Behera | Thursday, July 16, 2020

Introduction

This blog provides a complete code example to export html table to pdf, Note that before continuing this you should have idea about HTML and javascript if don't have knowledge of HTML development and javascript. Requesting to refer some related blogs.

table html to pdf

Convert HTML Table to PDF

Getting Started

Sometimes with our busy demplopment, while developing websites. We are writing lot of code to print a page document rather than writing simple and short code.

The below code example prints an HTML table simply using JavaScript code, it creates a table with a list of 10 students details, an HTML button also created to give print command. The HTML button calls printData function which contains the javascript code to give print command.

 <HTML>  
 <HEAD>  
 <TITLE>  
 Print html table  
 </TITLE>  
 <script>  
 function printData()  
 {  
   var divToPrint=document.getElementById("printTable");  
  newWin= window.open('','height=200,width=200');  
   newWin.document.write(divToPrint.outerHTML);  
   newWin.print();  
   newWin.close();  
 }  
 </script>  
 </HEAD>  
 <BODY>  
 <table id="printTable" style="border: 1px solid black;border-collapse: collapse;">  
      <tbody><tr>  
           <th bgcolor="NAVY"><font color="white"> Student Name</font></th>  
           <th bgcolor="NAVY"><font color="white">Roll No.</font></th>  
           <th bgcolor="NAVY"><font color="white">DIV</font></th>  
           <th bgcolor="NAVY"><font color="white">STD</font></th>       
           <th bgcolor="NAVY"><font color="white">GRNO</font></th>            
           <th bgcolor="NAVY"><font color="white">Card No.</font></th>  
      </tr>  
 <TR><TD >Kailash</TD><TD>1</TD><TD>A</TD><TD>VII</TD><TD>102751</TD><TD>0005717471</TD></TR>  
 <TR><TD>Panchanan</TD><TD>2</TD><TD>B</TD><TD>VII</TD><TD>102752</TD><TD>0005717472</TD></TR>  
 <TR><TD>Sanjay</TD><TD>3</TD><TD>C</TD><TD>VII</TD><TD>102753</TD><TD>0005717473</TD></TR>  
 <TR><TD>Duti Krishna</TD><TD>4</TD><TD>D</TD><TD>VII</TD><TD>102754</TD><TD>0005717474</TD></TR>  
 <TR><TD>Ganesh</TD><TD>5</TD><TD>A</TD><TD>VII</TD><TD>102755</TD><TD>0005717475</TD></TR>  
 <TR><TD>Hrushi</TD><TD>6</TD><TD>B</TD><TD>VII</TD><TD>102756</TD><TD>0005717476</TD></TR>  
 <TR><TD>Samir</TD><TD>7</TD><TD>C</TD><TD>VII</TD><TD>102757</TD><TD>0005717477</TD></TR>  
 <TR><TD>Radhika</TD><TD>8</TD><TD>D</TD><TD>VII</TD><TD>10278</TD><TD>0005717478</TD></TR>  
 <TR><TD>Krishna</TD><TD>9</TD><TD>A</TD><TD>VII</TD><TD>102759</TD><TD>0005717470</TD></TR>  
 <TR><TD>Nilanchal</TD><TD>10</TD><TD>B</TD><TD>VII</TD><TD>102760</TD><TD>0005717480</TD></TR>  
 </tbody></table>  
 <br />  
 <br />  
 <button onclick="printData();">Print me</button>  
 </BODY>  
 </HTML>

printData function

 function printData()  
 {  
   var divToPrint=document.getElementById("printTable");  
   newWin= window.open("");  
   newWin.document.write(divToPrint.outerHTML);  
   newWin.print();  
   newWin.close();  
 }

javascript print table

The above javascript code first creates object of the table using docuemtn.getElementById function. Then it creates an object of html window to popup print window and assigned the table content to the print window as print document.

Summary

The above code example printed a html table, copy the code, paste it in a new notepad file then save that file with .thml extension. Start your attached printer, open the saved file in chrome browser then click on the button print. Go to your printer and collect your prints. I hope you have enjoyed it a lot.

Thanks

By at