Bagaimanakah Saya Boleh Mencetak Hanya Div Tertentu pada Halaman Web Menggunakan CSS?

Mencetak Kandungan Khusus pada Halaman Web

Mencetak hanya div tertentu pada halaman web tanpa menjejaskan kandungan lain boleh menjadi tugas yang mencabar. Untuk menangani perkara ini, satu pendekatan berkesan menggunakan CSS dibentangkan di bawah:

Penyelesaian CSS:

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

Penjelasan:

Kod CSS ini menggunakan peraturan cetakan @media untuk menggunakan gaya khusus pada pratonton cetakan. Ia berfungsi dengan:

1. Menyembunyikan seluruh badan halaman (kecuali div yang akan dicetak) dengan menetapkan keterlihatannya kepada tersembunyi.
2. Menetapkan keterlihatan div sasaran ( #section-to-print) untuk kelihatan.
3. Letakkan div sasaran secara mutlak di bahagian atas sebelah kiri halaman (kiri: 0; atas: 0;) untuk memastikan ia dicetak dengan betul.

Pendekatan Alternatif:

Semasa menggunakan paparan untuk menyembunyikan kandungan mungkin kelihatan seperti pilihan, ia boleh mencabar kerana mana-mana elemen yang tersembunyi dengan paparan: tiada juga akan menyembunyikan keturunannya. Ini mungkin memerlukan penstrukturan semula halaman yang ketara.

Faedah Penyelesaian ini:

Penyelesaian CSS sahaja ini:

• Membolehkan anda mencetak secara terpilih hanya div yang dikehendaki tanpa melumpuhkan elemen halaman lain.
• Mengelakkan penciptaan tetingkap baharu, memastikan pengalaman pencetakan yang lancar.
• Mengekalkan penggayaan visual div sasaran untuk pencetakan, walaupun gaya yang digunakan bertujuan untuk paparan web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetak Hanya Div Tertentu pada Halaman Web Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!