Bagaimana untuk Mencetak Kandungan HTML Tertentu Tanpa Menjejaskan Paparan Halaman?

Mencetak Kandungan HTML Tertentu tanpa Menjejaskan Paparan Halaman

Dalam pembangunan web, anda mungkin menghadapi senario di mana anda perlu mencetak kandungan HTML tertentu apabila butang diklik, tanpa mengganggu paparan semasa halaman. Pelbagai penyelesaian wujud, termasuk yang anda nyatakan: meletakkan kandungan dalam div tersembunyi.

Walau bagaimanapun, pendekatan yang lebih cekap boleh dicapai menggunakan pertanyaan media CSS:

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

Di sini, a kelas yang dipanggil "noPrint" digunakan pada elemen yang tidak sepatutnya dicetak. Apabila dialog cetakan dibuka, gaya yang ditakrifkan dalam blok cetakan @media akan digunakan, menyembunyikan elemen ini sambil mengekalkan penampilan asal halaman web.

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

Dalam kod ini, tajuk "cetak saya" akan dicetak, manakala elemen dengan kelas "noPrint" akan disembunyikan. Kaedah ini membolehkan lebih fleksibiliti dan kawalan ke atas output cetakan, memastikan hanya kandungan yang dimaksudkan dihantar ke pencetak.

Atas ialah kandungan terperinci Bagaimana untuk Mencetak Kandungan HTML Tertentu Tanpa Menjejaskan Paparan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!