JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명
- 藏色散人원래의
- 2021-08-18 10:26:424631검색
이전 글 "JavaScript에서 다양한 방법으로 변수를 선언하는 방법을 모두에게 가르쳐 주세요"에서 JavaScript에서 다양한 방법으로 변수를 선언하는 방법을 소개해 드렸는데요, 관심 있는 친구들은 배우셔도 됩니다~
이 글의 요점은 기사 내용은 JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법을 가르치는 것입니다!
그래서 JavaScript에서 div의 내용을 인쇄하려면 구현 아이디어를 정리해야 합니다.
먼저 div의 내용을 JavaScript 변수에 저장한 다음 인쇄 버튼을 클릭하여 HTML div 요소의 내용을 추출합니다. ; 그런 다음 JavaScript 팝업 창을 만들고 HTML div 요소의 추출된 내용을 팝업 창에 씁니다. 마지막으로 JavaScript 창 인쇄 명령을 사용하여 창을 인쇄합니다.
아래에서는 두 가지 방법으로 구현하겠습니다.
첫 번째 방법: 이 예에서는 JavaScript 창 인쇄 명령을 사용하여 div 요소의 내용을 인쇄합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script>
function printDiv() {
var divContents = document.getElementById("GFG").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <h1>Div contents are <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
</head>
<body style="text-align:center;">
<div id="GFG" style="background-color:#00a2d4;">
<h2>PHP中文网</h2>
<p>
这是在div中，点击按钮后则会显示打印。
</p>
</div>
<input type="button" value="点击打印" onclick="printDiv()">
</body>
</html>버튼을 클릭하기 전의 효과는 다음과 같습니다.
다음으로 "인쇄하려면 클릭" 버튼을 클릭하면 다음 그림이 나타납니다.
두 번째 방법: 이 예에서는 JavaScript 창 인쇄 명령을 사용하여 div 요소의 내용을 인쇄합니다
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script>
function printDiv() {
var divContents = document.getElementById("GFG").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <h1>Div contents are <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
</head>
<body>
<center>
<div id="GFG" style="background-color:#9a9afb;">
<h2>PHP中文网</h2>
<table border="1px">
<tr>
<td>姓名</td>
<td>分数</td>
</tr>
<tr>
<td>张三</td>
<td>110</td>
</tr>
</table>
</div>
<p>
表格在div中，点击按钮就会打印出来。
</p>
<input type="button" value="点击打印"
onclick="printDiv()">
</center>
</body>
</html>버튼을 클릭하기 전의 효과는 다음과 같습니다.
"인쇄하려면 클릭하세요" 버튼을 클릭한 후의 효과는 다음과 같습니다.
마지막으로 "JavaScript Basics Tutorial을 추천하고 싶습니다. " ~ 배우려는 여러분을 환영합니다 ~
위 내용은 JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!