>  기사  >  웹 프론트엔드  >  JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명

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

藏色散人
藏色散人원래의
2021-08-18 10:26:424643검색

이전 글 "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 요소의 내용을 인쇄하는 방법에 대한 자세한 설명

"인쇄하려면 클릭하세요" 버튼을 클릭한 후의 효과는 다음과 같습니다.

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

마지막으로 "JavaScript Basics Tutorial을 추천하고 싶습니다. " ~ 배우려는 여러분을 환영합니다 ~

위 내용은 JavaScript를 사용하여 div 요소의 내용을 인쇄하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.