Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken
Ausführliche Erklärung, wie Sie mit JavaScript den Inhalt von div-Elementen drucken
- 藏色散人Original
- 2021-08-18 10:26:424563Durchsuche
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('', '', '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>Der Effekt vor dem Klicken auf die Schaltfläche ist wie folgt:
Als nächstes klicken wir auf die Schaltfläche „Zum Drucken klicken“ und das folgende Bild wird angezeigt:
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('', '', '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>Der Effekt vor dem Klicken auf die Schaltfläche ist wie folgt:
Der Effekt nach dem Klicken auf die Schaltfläche „Zum Drucken klicken“ ist wie folgt:
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!