search

Home >Web Front-end >JS Tutorial >window.print method to print a specified area of ​​a specified web page in a specified div_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 16:40:291696browse

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>

Content to print. Ha ha! 

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

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>

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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：In-depth understanding of function overloading in JavaScript_javascript skillsNext article：In-depth understanding of function overloading in JavaScript_javascript skills

Related articles

See more