Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken-js-Tutorial-php.cn

Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken

藏色散人

Freigeben： 2021-08-18 10:26:42

Original

4681 Leute haben es durchsucht

Im vorherigen Artikel „Lernen Sie, wie Sie Variablen in JavaScript auf unterschiedliche Weise deklarieren “ habe ich Ihnen vorgestellt, wie Sie Variablen in JavaScript auf unterschiedliche Weise deklarieren können ~

Der Hauptpunkt davon Der Inhalt des Artikels soll Ihnen beibringen, wie Sie mit JavaScript den Inhalt von div-Elementen drucken!

Um den Inhalt des Div in JavaScript zu drucken, müssen wir die Implementierungsideen klären:

Speichern Sie zuerst den Inhalt des Div in einer JavaScript-Variablen und klicken Sie dann auf die Schaltfläche „Drucken“, um den Inhalt des HTML-Div-Elements zu extrahieren ; Erstellen Sie dann ein JavaScript-Popup-Fenster und schreiben Sie den extrahierten Inhalt des HTML-Div-Elements in das Popup-Fenster. Verwenden Sie schließlich den JavaScript-Fensterdruckbefehl, um das Fenster zu drucken.

Im Folgenden werden wir es auf zwei Arten implementieren:

Die erste Methode: In diesem Beispiel wird der Druckbefehl des JavaScript-Fensters verwendet, um den Inhalt des div-Elements zu drucken

<!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>

Nach dem Login kopieren

Der Effekt vor dem Klicken auf die Schaltfläche ist wie folgt:

Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken

Als nächstes klicken wir auf die Schaltfläche „Zum Drucken klicken“ und das folgende Bild wird angezeigt:

Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken

Zweite Methode: In diesem Beispiel wird der JavaScript-Fensterdruckbefehl verwendet, um den Inhalt des div-Elements zu drucken

<!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>

Nach dem Login kopieren

Der Effekt vor dem Klicken auf die Schaltfläche ist wie folgt:

Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken

Der Effekt nach dem Klicken auf die Schaltfläche „Zum Drucken klicken“ ist wie folgt:

Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken

Abschließend möchte ich „JavaScript Basics Tutorial“ empfehlen " ~ Begrüßen Sie alle zum Lernen ~

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!