Bagaimanakah saya boleh Mencetak Elemen HTML Khusus pada Klik Butang tanpa Mencetak Keseluruhan Halaman?

Cetak Elemen HTML pada Butang Klik tanpa Mencetak Halaman

Dalam senario ini, anda mencari kaedah untuk mencetak kandungan HTML yang dicetuskan oleh butang klik tanpa menangkap keseluruhan halaman web dalam output cetakan. Pertimbangkan penyelesaian berikut:

Peraturan Media Cetak CSS

Menggunakan peraturan media cetak CSS, anda boleh secara terpilih memaparkan kandungan semata-mata untuk tujuan pencetakan. Begini cara anda boleh melaksanakan ini:

<code class="css">/* CSS file */

@media print {
  /* Hide any element you don't want to print */
  .noPrint {
    display: none;
  }

  /* Set elements you want to print to display */
  h1 {
    color: #f6f6;
  }
}

/* Elements in the HTML page */

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

Penjelasan

• Peraturan cetakan @media mentakrifkan gaya khusus untuk media cetak.
• Elemen dengan kelas noPrint akan disembunyikan semasa mencetak (menggunakan paparan: tiada).

• elemen yang mengandungi kandungan yang anda ingin cetak ditetapkan untuk dipaparkan dalam media cetak dan mempunyai warna tersendiri.

• Apabila butang "Cetak Saya" diklik, window.print() dipanggil untuk mencetak halaman yang diubah suai , yang kini hanya merangkumi elemen yang dikehendaki.

Kelebihan

• Mengelakkan mencetak kandungan yang tidak diingini.
• Mengekalkan kandungan yang bersih dan tidak bersepah output cetakan.
• Membenarkan kawalan kandungan yang fleksibel, memastikan hanya maklumat yang berkaitan dicetak.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Mencetak Elemen HTML Khusus pada Klik Butang tanpa Mencetak Keseluruhan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!