JavaScript는 Button_javascript 스킬을 클릭하여 직접 인쇄를 구현합니다.
- WBOY원래의
- 2016-05-16 15:21:261997검색
많은 웹사이트에 이 기능이 있습니다. 하단으로 이동하면 인쇄 버튼을 클릭하여 인쇄 기능을 완료할 수 있습니다. 이 기능은 매우 훌륭하고 사용자 친화적이며 코드도 매우 간단합니다.
<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 학습에 도움이 되는 별도의 코드 주석이 있습니다. 이 글이 모든 분들께 도움이 되기를 바랍니다.