Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div-tutorial js-php.cn

Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div

藏色散人

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

asal

4667 orang telah melayarinya

Dalam artikel sebelumnya "Ajar anda cara mengisytiharkan pembolehubah dalam JavaScript dengan cara yang berbeza", saya memperkenalkan anda cara mengisytiharkan pembolehubah dalam JavaScript dengan cara yang berbeza ~

Kandungan utama artikel ini adalah untuk mengajar anda cara menggunakan JavaScript untuk mencetak kandungan elemen div!

Jadi untuk mencetak kandungan div dalam JavaScript, kita perlu menyusun idea pelaksanaan:

Mula-mula simpan kandungan div dalam pembolehubah JavaScript kemudian klik butang cetak untuk ekstrak elemen div HTML; kemudian buat tetingkap timbul JavaScript dan tulis kandungan unsur div HTML yang diekstrak ke dalam tetingkap timbul dan akhirnya cetak tetingkap menggunakan arahan cetakan tetingkap JavaScript.

Di bawah ini kami akan melaksanakannya dalam dua cara:

Kaedah pertama: Contoh ini menggunakan arahan cetakan tetingkap JavaScript untuk mencetak kandungan elemen 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>

Salin selepas log masuk

Kesan sebelum mengklik butang adalah seperti berikut:

Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div

Kemudian kita klik butang "Klik untuk Cetak", dan gambar berikut muncul:

Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div

Kaedah kedua: Contoh ini menggunakan arahan cetakan tetingkap JavaScript untuk mencetak kandungan elemen 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>

Salin selepas log masuk

Kesan sebelum klik butang adalah seperti berikut:

Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div

Kesan selepas klik butang "Click to Print" adalah seperti berikut:

Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div

Akhir sekali, saya mengesyorkan "Tutorial Asas JavaScript》~Semua orang dialu-alukan untuk belajar~

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!