Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div
Penjelasan terperinci tentang cara menggunakan JavaScript untuk mencetak kandungan elemen div
- 藏色散人asal
- 2021-08-18 10:26:424666semak imbas
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('', '', '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>Kesan sebelum mengklik butang adalah seperti berikut:
Kemudian kita klik butang "Klik untuk Cetak", dan gambar berikut muncul:
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('', '', '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>Kesan sebelum klik butang adalah seperti berikut:
Kesan selepas klik butang "Click to Print" adalah seperti berikut:
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!