지정된 div_javascript 스킬로 지정된 웹페이지의 지정된 영역을 인쇄하는 window.print 메소드-JS 튜토리얼-php.cn

지정된 div_javascript 스킬로 지정된 웹페이지의 지정된 영역을 인쇄하는 window.print 메소드

WBOY

풀어 주다： 2016-05-16 16:40:29

원래의

1671명이 탐색했습니다.

첫 번째 방법: 인쇄되지 않는 영역 지정
CSS를 사용하여 .noprint 클래스를 정의하고 인쇄할 수 없는 콘텐츠를 이 클래스에 넣습니다.
자세한 내용은 다음과 같습니다.

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

로그인 후 복사

인쇄할 콘텐츠입니다. 하하!

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

로그인 후 복사

두 번째 방법: 인쇄 영역 지정
인쇄할 내용을 span이나 div에 넣은 후 함수를 통해 인쇄합니다.

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

로그인 후 복사

전체 페이지 중 일부만 인쇄하려면 두 번째 방법을 사용하는 것이 가장 좋습니다.

세 번째 방법: 인쇄할 페이지의 레이아웃이 원본 웹 페이지와 많이 다를 경우 이 방법을 사용하세요. 인쇄 버튼을 클릭하면 새 창이 팝업되고, 새 창에 인쇄할 내용이 표시되며, 새 창에서 window.print() 메서드를 호출하면 자동으로 새 창이 닫힙니다.
window.print는 웹 페이지를 인쇄할 수 있지만 때로는 특정 컨트롤이나 콘텐츠만 인쇄하려는 경우도 있습니다.

먼저 인쇄할 내용을 div에 넣은 후 다음 코드를 사용하여 인쇄할 수 있습니다.

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

로그인 후 복사