JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明-jsチュートリアル-php.cn

JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明

藏色散人

リリース： 2021-08-18 10:26:42

オリジナル

4667 人が閲覧しました

前の記事「JavaScript で変数をさまざまな方法で宣言する方法をみんなに教える」では、JavaScript で変数をさまざまな方法で宣言する方法を紹介しました。興味のある友達はそれについて学ぶことができます。 ~

この記事の主な内容は、JavaScript を使用して div 要素の内容を出力する方法を説明することです。

したがって、JavaScript で div の内容を印刷するには、実装のアイデアを整理する必要があります:

まず div の内容を JavaScript 変数に保存し、次に印刷ボタンをクリックして、 HTML div 要素を抽出し、次に JavaScript ポップアップウィンドウを作成し、抽出した HTML div 要素のコンテンツをポップアップウィンドウに書き込み、最後に JavaScript window print コマンドを使用してウィンドウを印刷します。

以下では 2 つの方法で実装します:

最初の方法: この例では、JavaScript ウィンドウの print コマンドを使用して 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要素の内容を出力する方法の詳細な説明

2 番目の方法: この例では、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要素の内容を出力する方法の詳細な説明