JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명

藏色散人

풀어 주다： 2021-08-18 10:26:42

원래의

4711명이 탐색했습니다.

이전 글 "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(&#39;&#39;, &#39;&#39;, &#39;height=500, width=500&#39;);
            a.document.write(&#39;<html>&#39;);
            a.document.write(&#39;<body > <h1>Div contents are <br>&#39;);
            a.document.write(divContents);
            a.document.write(&#39;</body></html>&#39;);
            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 요소의 내용을 인쇄하는 방법에 대한 자세한 설명

다음으로 "인쇄하려면 클릭" 버튼을 클릭하면 다음 그림이 나타납니다.

JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명

두 번째 방법: 이 예에서는 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(&#39;&#39;, &#39;&#39;, &#39;height=500, width=500&#39;);
            a.document.write(&#39;<html>&#39;);
            a.document.write(&#39;<body > <h1>Div contents are <br>&#39;);
            a.document.write(divContents);
            a.document.write(&#39;</body></html>&#39;);
            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를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명