Rumah >hujung hadapan web >html tutorial >Bagaimana untuk menambah butang untuk mencetak halaman HTML?
Bagaimana untuk menambah butang untuk mencetak halaman HTML?
- 王林ke hadapan
- 2023-09-13 14:33:021842semak imbas
Tambah butang "Cetak" pada halaman web HTML Apabila butang diklik, seluruh halaman web akan dicetak. Ini adalah ciri yang agak mudah untuk ditambahkan pada halaman web dan boleh ditambah menggunakan beberapa elemen HTML dan JavaScript tulen.
Jadi, mari kita bincangkan cara untuk melakukan ini.
kaedah
Pertama, tambahkan teg
Tetapkan atribut jenisnya kepada "butang" dan berikannya sedikit nilai.
Kemudian tetapkan pengendali "onclick" kepada input yang akan dikendalikan menggunakan JavaScript.
Fungsi yang mengendalikan acara klik tag input adalah seperti berikut -
const handlePrint = () => {
window.print();
}
Kod lengkap kaedah ini ialah -
Contoh
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
Adding Print Button
</title>
</head>
<body style="color: black;">
<h1>Hello World!</h1>
<p>Welcome to my Website</p>
<p>
This website is built using plain JS and HTML.
</p>
<p>
Okay Bye!!!
</p>
<input value='Print' type='button' onclick='handlePrint()' />
<script type="text/javascript">
const handlePrint = () => {
var actContents = document.body.innerHTML;
document.body.innerHTML = actContents;
window.print();
}
</script>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk menambah butang untuk mencetak halaman HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!