Explication détaillée de la façon d'utiliser JavaScript pour imprimer le contenu des éléments div-js tutoriel-php.cn

Explication détaillée de la façon d'utiliser JavaScript pour imprimer le contenu des éléments div

藏色散人

Libérer： 2021-08-18 10:26:42

original

4662 Les gens l'ont consulté

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(&#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>

Copier après la connexion

L'effet avant de cliquer sur le bouton est le suivant :

Explication détaillée de la façon dutiliser JavaScript pour imprimer le contenu des éléments div

Ensuite, nous cliquons sur le bouton "Cliquez pour imprimer", et l'image suivante apparaîtra :

Explication détaillée de la façon dutiliser JavaScript pour imprimer le contenu des éléments div

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(&#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>

Copier après la connexion

L'effet avant de cliquer sur le bouton est le suivant :

Explication détaillée de la façon dutiliser JavaScript pour imprimer le contenu des éléments div

L'effet après avoir cliqué sur le bouton "Cliquer pour imprimer" est le suivant :

Explication détaillée de la façon dutiliser JavaScript pour imprimer le contenu des éléments div

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!