Bagaimana untuk Mensimulasikan Kertas A4 dengan Tepat untuk Mencetak dalam Chrome menggunakan CSS?

Melaraskan CSS untuk Mensimulasikan Kertas A4 dan Mendayakan Pencetakan Tepat

Untuk mencipta kertas A4 simulasi dalam web yang mencetak dengan tepat dalam Chrome, CSS tertentu pelarasan adalah perlu. Walaupun dimensi 21cm x 29.7cm yang disediakan untuk saiz elemen mungkin kelihatan betul, apabila mencetak atau menjana pratonton cetakan, halaman akan dipotong.

Mengatasi Isu

Selepas penyiasatan lanjut, punca utama terletak pada menetapkan "awal" kepada lebar halaman dalam peraturan media cetak. Menggunakan "awal" untuk lebar dalam Chrome menghasilkan penskalaan jika tiada nilai panjang khusus ditentukan untuk elemen induknya. Ini menyebabkan halaman menjadi terlalu panjang dan pelapik lebih besar daripada 2cm yang dimaksudkan.

Penyelesaian

Untuk membetulkan isu ini, gantikan "awal" dengan kertas sebenar lebar (210mm) dan tinggi (297mm) dalam peraturan media cetak. Gunakan ini pada "html," "body," atau terus ke elemen ".page".

html, body {
  width: 210mm;
  height: 297mm;
}

Contoh

Kod CSS yang disemak berikut menggabungkan penyelesaian yang dicadangkan:

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... other print styles ... */
}

Keserasian

Ini penyelesaian berjaya menyelesaikan isu pencetakan dalam Chrome (diuji pada pelbagai platform OS) sambil mengekalkan kefungsian dalam penyemak imbas lain.

Atas ialah kandungan terperinci Bagaimana untuk Mensimulasikan Kertas A4 dengan Tepat untuk Mencetak dalam Chrome menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!