Bagaimana untuk Mencetak Kandungan HTML Tertentu pada Klik Butang Tanpa Mencetak Keseluruhan Halaman?

Mencetak Kandungan HTML Khusus pada Klik Butang Tanpa Termasuk Halaman Web Penuh

Mencetak hanya kandungan HTML tertentu dengan butang klik pengguna boleh dicapai dalam pelbagai cara. Satu kaedah ialah mencipta elemen div tersembunyi untuk memegang HTML yang dikehendaki. Div ini sepatutnya mempunyai sifat paparannya ditetapkan kepada 'cetak' untuk tujuan pencetakan, manakala nilai paparannya kekal 'tiada' untuk paparan skrin. Elemen lain pada halaman boleh mempunyai sifat paparannya dilaraskan untuk dipaparkan pada skrin tetapi bersembunyi semasa pencetakan. Kaedah ini, walau bagaimanapun, memerlukan pengurusan yang teliti bagi sifat paparan semua elemen halaman.

Pendekatan alternatif ialah mencipta halaman web terpencil baharu yang mengandungi kandungan HTML semata-mata untuk dicetak. Halaman baharu ini boleh dimuatkan secara dinamik ke dalam iframe tersembunyi apabila pengguna mengklik butang cetak. Setelah iframe dimuatkan sepenuhnya, fungsi cetakan penyemak imbas boleh dicetuskan dan HTML terbenam akan dicetak tanpa sebarang elemen halaman yang tidak diingini. Kaedah ini menawarkan fleksibiliti yang lebih besar dan kawalan dinamik ke atas proses pencetakan.

Berikut ialah contoh menggunakan pendekatan kedua:

<code class="javascript">// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';</code>

Penyelesaian ini membolehkan anda mencetak kandungan HTML tertentu dengan mudah apabila butang diklik tanpa mengubah suai rupa atau kandungan halaman web utama. Ia memastikan bahawa hanya HTML yang dimaksudkan dicetak, memberikan pengalaman pencetakan yang lebih mesra pengguna.

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