Translate

Saturday, 25 November 2017

print div content using javascript function

Key Code:

Script
------------

   <script language="javascript" type="text/javascript">
        function Clickheretoprint() {
            var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
            disp_setting += "scrollbars=yes,width=650, height=600, left=100, top=25";
            var content_vlue = document.getElementById("divContentToBePrint").innerHTML;
            var docprint = window.open("", "", disp_setting);
            docprint.document.open();
            docprint.document.write("<html><head><title>Pabitra Print Form</title><style type='text/css' media='all'>.repfmtheader{font-family : Cambria,Baskerville Old Face,Times New Roman;font-size : 18px;font-style : normal;font-variant :normal;font-weight : bold;} .repfmt{font-family: Arial Narrow,Times New Roman,Arial;font-size : 15px;font-weight:bold;}</style>");
            docprint.document.write("<style type='text/css' media='all'>.repfmtsno{font-family: tahoma,Arial,Times New Roman;font-size : 15px;padding-left : 15px;}</style>");
            docprint.document.write('</head><body onLoad="self.print()"><center>');
            docprint.document.write(content_vlue);
            docprint.document.write('</center></body></html>');
            docprint.document.close();
            docprint.focus();
        }
 
</script>

Called the javascript function in button 
------------------------------------------------
<input type="button" value="Print" onclick="Clickheretoprint();"/>


Div Content With Div ID
------------------
<div id="divContentToBePrint">

<h3>Application Form</h3>
<table border="1">
 <thead>
  <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Action</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
     <td><input type="text" id="txtID" placeholder="Enter ID" title="Enter your ID" /></td>
     <td><input type="text" id="txtName" placeholder="Enter Name" title="Enter your full name"/></td>
      <td><input type="button" id="btnAdd" value="Add" title="click here for add new record"/></td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
     <td>1</td>
     <td>PABITRA</td>
      <td>
      <input type="button" id="btnEdit" value="Edit" title="click here for edit the record"/>
      <input type="button" id="btnDelete" value="Delete" title="click here for delete the record"/>
      </td>
  </tr>
  <tr>
     <td>2</td>
     <td>Microsoft</td>
      <td>
      <input type="button" id="Button3" value="Edit" title="click here for edit the record"/>
      <input type="button" id="Button4" value="Delete" title="click here for delete the record"/>
      </td>
  </tr>
  <tr>
     <td>3</td>
     <td>MS Sql Server</td>
     <td>
      <input type="button" id="Button1" value="Edit" title="click here for edit the record"/>
      <input type="button" id="Button2" value="Delete" title="click here for delete the record"/>
      </td>
  </tr>
 </tbody>
</table>

</div>

=================================================================


Brif Page Code or details Sample Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pabitra Custom Print Page</title>
    <script language="javascript" type="text/javascript">
        function Clickheretoprint() {
            var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
            disp_setting += "scrollbars=yes,width=650, height=600, left=100, top=25";
            var content_vlue = document.getElementById("divContentToBePrint").innerHTML;
            var docprint = window.open("", "", disp_setting);
            docprint.document.open();
            docprint.document.write("<html><head><title>Pabitra Print Form</title><style type='text/css' media='all'>.repfmtheader{font-family : Cambria,Baskerville Old Face,Times New Roman;font-size : 18px;font-style : normal;font-variant :normal;font-weight : bold;} .repfmt{font-family: Arial Narrow,Times New Roman,Arial;font-size : 15px;font-weight:bold;}</style>");
            docprint.document.write("<style type='text/css' media='all'>.repfmtsno{font-family: tahoma,Arial,Times New Roman;font-size : 15px;padding-left : 15px;}</style>");
            docprint.document.write('</head><body onLoad="self.print()"><center>');
            docprint.document.write(content_vlue);
            docprint.document.write('</center></body></html>');
            docprint.document.close();
            docprint.focus();
        }
 
</script>


</head>
<body>
<div>
<input type="button" value="Print" onclick="Clickheretoprint();"/>
<!--<asp:Button ID="btnPrint"  Height="40px" Width="50px" runat="server" Text="Print" OnClientClick="Clickheretoprint();" />-->                 
                 
</div>
<div id="divContentToBePrint">

<h3>Application Form</h3>
<table border="1">
 <thead>
  <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Action</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
     <td><input type="text" id="txtID" placeholder="Enter ID" title="Enter your ID" /></td>
     <td><input type="text" id="txtName" placeholder="Enter Name" title="Enter your full name"/></td>
      <td><input type="button" id="btnAdd" value="Add" title="click here for add new record"/></td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
     <td>1</td>
     <td>PABITRA</td>
      <td>
      <input type="button" id="btnEdit" value="Edit" title="click here for edit the record"/>
      <input type="button" id="btnDelete" value="Delete" title="click here for delete the record"/>
      </td>
  </tr>
  <tr>
     <td>2</td>
     <td>Microsoft</td>
      <td>
      <input type="button" id="Button3" value="Edit" title="click here for edit the record"/>
      <input type="button" id="Button4" value="Delete" title="click here for delete the record"/>
      </td>
  </tr>
  <tr>
     <td>3</td>
     <td>MS Sql Server</td>
     <td>
      <input type="button" id="Button1" value="Edit" title="click here for edit the record"/>
      <input type="button" id="Button2" value="Delete" title="click here for delete the record"/>
      </td>
  </tr>
 </tbody>
</table>

</div>           
</body>
</html>

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)