Bagaimana untuk Mencetak Elemen HTML Tertentu Hanya Menggunakan CSS?

Cara Mencetak Elemen HTML Tertentu Sahaja

Tugas mencetak elemen HTML tertentu sahaja, seperti div, selalunya timbul dalam pembangunan web. Walau bagaimanapun, mencapai ini tanpa melumpuhkan keterlihatan kandungan halaman lain boleh menjadi mencabar.

Untuk menangani isu ini, terdapat penyelesaian CSS yang membolehkan anda mencetak elemen yang diingini sambil menyembunyikan seluruh halaman. Dengan melaksanakan kod berikut, anda boleh menentukan bahawa keseluruhan halaman menjadi tidak kelihatan semasa pencetakan, kecuali div yang ingin anda cetak:

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

Dalam kod ini, div yang anda ingin cetak diberikan ID "bahagian untuk dicetak." Apabila penyemak imbas memasuki mod cetak (yang dicetuskan oleh arahan cetak pengguna), peraturan @media yang ditentukan menjadi aktif.

Peraturan ini menetapkan sifat keterlihatan teg badan kepada "tersembunyi", menjadikan semua elemen halaman tidak kelihatan. Walau bagaimanapun, keterlihatan div dengan ID "section-to-print" secara eksplisit ditetapkan kepada "kelihatan."

Selain itu, untuk memastikan pencetakan yang betul, div diletakkan secara mutlak dan diletakkan di sudut kiri atas daripada halaman. Ini memastikan ia muncul di lokasi yang diingini semasa mencetak.

Menggunakan kaedah ini, anda boleh mencetak div tertentu secara selektif tanpa memerlukan dialog tambahan atau memanipulasi struktur halaman. Ia menawarkan penyelesaian yang bersih dan berkesan untuk situasi di mana mencetak elemen HTML tertentu diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk Mencetak Elemen HTML Tertentu Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!