Most Popular Tutorials




How to print html content and div using javascript?

File name : index.php

<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
function myPrint(myfrm)
{
var printdata=document.getElementById(myfrm);
newwin=window.open("");
newwin.document.write(printdata.outerHTML);
newwin.print();
newwin.close();
}
</script>
</body>
</html>

Output :-

Personal information: First name:

Last name:



File name : index.php

<html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>


<body>
//HTML Page
//Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">


<div id="div_print">


<h1 style="Color:Red">The Div content which you want to print</h1>


</div>
//Other content you wouldn't like to print
//Other content you wouldn't like to print
</body>


</html>

File name : index.php

<html>
<head>
<script>
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</head>

<h1> do not print this </h1>

<div id='printMe'>
Print this only
</div>

<button onclick="printDiv('printMe')">Print only the above div</button>
</html>

File name : index.php

<html xmlns="http://www.ittutorial.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function PrintDiv() {
var divContents = document.getElementById("dvContents").innerHTML;
var printWindow = window.open('', '', 'height=200,width=400');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
</script>
</head>
<body>
<form id="form1">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">ASPSnippets.com
Sample page</span>
<hr />
<div id="dvContents" style="border: 1px dotted black; padding: 5px; width: 300px">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" onclick="PrintDiv();" value="Print" />
</form>
</body>
</html>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link

Ittutorial