Print your html using jquery

I have some content of my site into a table and i want to print whole content of my table. Please see below screne shot -

Solution :

Below is my javascript function which is used to print content when i click on print icon .

<script type="text/javascript">

function printContent(data){
        var popupWindow = window.open('','printwin', 'scrollbars=yes, resizable=yes,left=100,top=100,width=600,height=600');
        popupWindow.document.write('<html>\n<head>\n');
        popupWindow.document.write('<title></title>\n');
        popupWindow.document.write('<script>\n');
        popupWindow.document.write('function print_win(){\n');
        popupWindow.document.write('\nwindow.print();\n');
        popupWindow.document.write('\nwindow.close();\n');
        popupWindow.document.write('}\n');
        popupWindow.document.write('<\/script>\n');
        popupWindow.document.write('</head>\n');
        popupWindow.document.write('<body onload="print_win()">\n');
        popupWindow.document.write('<style type="text/css">table tr th a{float: left;text-decoration:none;color:#464646;font-family:MyriadProSemibold;font-size:16px;font-weight: bold;}table tr th {background: none repeat scroll 0 0 #e6e6e6;border-bottom: 1px solid #747474;color: #464646;font-family:MyriadProSemibold;font-size: 14px;font-weight: normal;padding: 1.5% 1.5px;} table tr td{border-bottom:1px solid #747474;color: #464646;font-family: MyriadProRegular;font-size:14px;font-weight:normal;    padding:1.5% 1.5px;vertical-align:top;}</style>\n');
        popupWindow.document.write(data);
        popupWindow.document.write('</body>\n');
        popupWindow.document.write('</HTML>\n');
        popupWindow.document.close();
}

</script>

Below is my html code :

Suppose below is html which i want to print :-

<table id="print_report">
<tr><th>User</th><th>Views</th><th>Print</th></tr>
<tr><td>Rakesh sharma</td><td>911</td><td>2</td></tr>
<tr><td>Salman ahmad</td><td>231</td><td>7</td></tr>

<tr><td>Ritesh singh</td><td>44</td><td>8</td></tr>
</table>

Call of function : Below is my jquery code

<script type="text/javascript">

     $("#print_icon").click(function(){
             var data = $("#print_report").html(); // Its return the table content.
             printContent(data); // Here is calling the function by passing table data.
   });

</script>

Output :   When you click on print icon then like below screne shot an print pop display.

If you like this post please don't dont forget to leave a comment.

Chears ..
Happy coding :)

Print your html using jquery

Post a Comment

Contact Form