window.print method to print a specified area of a specified web page in a specified div

window.print method to print a specified area of a specified web page in a specified div_javascript skills

WBOY

Release： 2016-05-16 16:40:29

Original

1644 people have browsed it

The first method: specify the non-printing area
Use CSS to define a .noprint class and put non-printable content into this class.
Details are as follows:

<style media=print type="text/css"> 
.noprint{visibility:hidden} 
</style>

Copy after login

Content to print. Ha ha!

<p class="noprint">将不打印的代码放在这里。</p> 
<a href="javascript:window.print()" rel="external nofollow" target="_self">打印</a>

Copy after login

The second method: specify the printing area
Put the content to be printed into a span or div, and then print it through a function.

<span id='div1'>把要打印的内容放这里</span> 
<p>所有内容</p> 
<div id="div2">div2的内容</div> 
<a href="javascript:printme()" rel="external nofollow" target="_self">打印</a> 
<script language="javascript"> 
function printme() 
{ document.body.innerHTML=document.getElementByIdx_x_x('div1').innerHTML+'<br/>'+document.getElementByIdx_x_x('div2').innerHTML; 
window.print(); 
} 
</script>

Copy after login

If you want to print only a small part of the entire page, it is best to use the second method.

The third method: If the layout of the page to be printed is very different from the original web page, use this method. Click the print button to pop up a new window, display the content to be printed in the new window, call the window.print() method in the new window, and then automatically close the new window.
window.print can print web pages, but sometimes we only want to print specific controls or content. What should we do?

First we can put the content to be printed in a div, and then use the following code to print.

<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>

Copy after login