Maison > Article > interface Web > Explication détaillée de la façon d'utiliser JavaScript pour imprimer le contenu des éléments div
Explication détaillée de la façon d'utiliser JavaScript pour imprimer le contenu des éléments div
- 藏色散人original
- 2021-08-18 10:26:424630parcourir
Dans l'article précédent "Apprenez à tout le monde à déclarer des variables de différentes manières en JavaScript", je vous ai présenté comment déclarer des variables de différentes manières en JavaScript. Les amis intéressés peuvent en apprendre davantage~
Le point principal de ceci. article Le contenu est de vous apprendre à utiliser JavaScript pour imprimer le contenu des éléments div !
Donc, pour imprimer le contenu du div en JavaScript, nous devons trier les idées d'implémentation :
Stockez d'abord le contenu du div dans une variable JavaScript puis cliquez sur le bouton imprimer pour extraire le contenu de l'élément HTML div ; ; puis créez une fenêtre contextuelle JavaScript et écrivez le contenu extrait de l'élément HTML div dans la fenêtre contextuelle ; utilisez enfin la commande d'impression de la fenêtre JavaScript pour imprimer la fenêtre.
Ci-dessous, nous allons l'implémenter de deux manières :
La première méthode : Cet exemple utilise la commande d'impression de la fenêtre JavaScript pour imprimer le contenu de l'élément div
<!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>L'effet avant de cliquer sur le bouton est le suivant :
Ensuite, nous cliquons sur le bouton "Cliquez pour imprimer", et l'image suivante apparaîtra :
Deuxième méthode : Cet exemple utilise la commande d'impression de la fenêtre JavaScript pour imprimer le contenu de l'élément div
<!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>L'effet avant de cliquer sur le bouton est le suivant :
L'effet après avoir cliqué sur le bouton "Cliquer pour imprimer" est le suivant :
Enfin, je voudrais recommander "Tutoriel de base de JavaScript " ~ Bienvenue à tous pour apprendre ~
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!