JavaScript는 Button_javascript 스킬을 클릭하여 직접 인쇄를 구현합니다.-JS 튜토리얼-php.cn

JavaScript는 Button_javascript 스킬을 클릭하여 직접 인쇄를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:21:26

원래의

2030명이 탐색했습니다.

많은 웹사이트에 이 기능이 있습니다. 하단으로 이동하면 인쇄 버튼을 클릭하여 인쇄 기능을 완료할 수 있습니다. 이 기능은 매우 훌륭하고 사용자 친화적이며 코드도 매우 간단합니다.

<a href="javascript:window.print()">脚本之家</a>

로그인 후 복사

즉, 현재 페이지를 인쇄하려면 window.print() 함수를 호출하기만 하면 됩니다.

그러나 일부 웹 페이지의 많은 콘텐츠는 인쇄할 필요가 없기 때문에 위의 내용은 완벽하지 않습니다. 다음은 페이지에 지정된 콘텐츠를 인쇄하는 방법입니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>指定被打印的内容</title>
<script language="javascript"> 
function printdiv(printpage) 
{ 
var newstr = printpage.innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML =newstr; 
window.print(); 
document.body.innerHTML=oldstr; 
return false; 
} 
window.onload=function()
{
var bt=document.getElementById("bt");
var div_print=document.getElementById("div_print");
bt.onclick=function()
{
printdiv(div_print);
}
}
</script> 
</head> 
<body> 
<div id="div_print"> 
<h1 style="Color:Red">这是要被打印的内容</h1> 
</div>
<div style="Color:Red">欢迎您</div> 
<input name="print" type="button" id="bt" value="点击打印" /> 
</body> 
</html>

로그인 후 복사

특별 참고 사항: 인쇄 미리보기를 사용하려면 테스트를 위해 코드를 로컬 컴퓨터에 복사해야 합니다. 그렇지 않으면 오류가 발생합니다.

위의 코드는 웹 페이지의 지정된 내용을 인쇄하는 효과를 구현합니다. 다음은 구현 프로세스에 대한 간략한 소개입니다.

1. 구현 원칙:

js 코드에서 document.body.innerHTML =newstr을 사용하면 원본 본문의 내용을 인쇄할 내용으로 동적으로 바꿀 수 있습니다. 원리는 간단합니다. 코드 주석.

2. 코드 주석:

1.function printdiv(printpage){}는 인쇄를 제어하는 함수를 선언합니다. 매개변수는 객체이며 이 객체의 내용이 인쇄됩니다.
2.var newstr = printpage.innerHTML; 인쇄할 내용을 가져옵니다.
3.var oldstr = document.body.innerHTML, 원본 본문의 내용입니다.
4. document.body.innerHTML =newstr, 원본 본문의 내용을 인쇄할 내용으로 바꿉니다.
5.window.print(), 인쇄를 시작합니다.
6.document.body.innerHTML=oldstr을 입력한 다음 원본 본문의 내용을 복원합니다.

3. 관련자료:

1. window.print() 함수에 대해서는 window 객체의 print() 메소드 장을 참조하세요.
2. onclick 이벤트에 대해서는 javascript onclick 이벤트 장을 참고하세요.

위 내용은 비교적 간단하며, 버튼을 클릭하여 인쇄 기능을 구현하는 js 학습에 도움이 되는 별도의 코드 주석이 있습니다. 이 글이 모든 분들께 도움이 되기를 바랍니다.