Bagaimana untuk Mencetak Kandungan HTML Terpilih Hanya pada Klik Butang?

Mencetak Kandungan HTML Secara Selektif pada Klik Butang

Pembangun web sering menghadapi keperluan untuk membenarkan pengguna mencetak bahagian tertentu halaman web tanpa memasukkan keseluruhan kandungan halaman. Dalam konteks ini, persoalan timbul:

Bagaimanakah kita boleh mencetak hanya kandungan HTML terpilih apabila butang diklik, tidak termasuk halaman yang lain?

Penyelesaian:

Penyelesaian yang dicadangkan untuk menyimpan kandungan HTML tersembunyi dalam paparan: print div ialah pendekatan yang sah. Walau bagaimanapun, terdapat kaedah yang lebih mudah dan cekap:

Buat Lembaran Gaya Cetak:

1. Buat fail CSS bernama "print.css" yang mengandungi perkara berikut kod:

<code class="css">@media print {
  .noPrint {
    display: none;
  }
}</code>

Kod ini akan menyembunyikan elemen dengan kelas "noPrint" apabila halaman dicetak.

2. Gunakan Kelas NoPrint:

Kenal pasti kandungan HTML yang tidak sepatutnya dicetak dan tambahkan kelas "noPrint" pada elemen ini, seperti:

<code class="html"><h1 class="noPrint">No Print</h1></code>

3. Sertakan Cetak Lembaran Gaya:

Tambah baris berikut pada bahagian dokumen HTML anda:

<code class="html"><link rel="stylesheet" href="print.css" media="print"></code>

4. Tambah Butang Cetak:

Buat butang yang mencetuskan dialog cetakan apabila diklik:

<code class="html"><button onclick="window.print()">Print</button></code>

Penjelasan:

Apabila butang cetak diklik, kaedah window.print() dipanggil, membuka dialog cetakan penyemak imbas. Pertanyaan media CSS @media print { ... } dicetuskan, menyebabkan elemen dengan kelas "noPrint" disembunyikan. Akibatnya, hanya kandungan HTML yang diingini dicetak.

Atas ialah kandungan terperinci Bagaimana untuk Mencetak Kandungan HTML Terpilih Hanya pada Klik Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!