Saya perlu mensimulasikan kertas A4 di web dan memungkinkan untuk mencetak halaman ini seperti yang ditampilkan di browser (Chrome, khususnya). Saya mengatur ukuran elemen ke 21cm x 29.7cm, tetapi ketika saya mengirim untuk mencetak (atau mencetak pratinjau) itu klip halaman saya.

Lihat contoh langsung ini !

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="book">
  <div class="page">
    <div class="subpage">Page 1/2</div>
  </div>
  <div class="page">
    <div class="subpage">Page 2/2</div>
  </div>
</div>

Saya pikir saya lupa sesuatu. Tetapi apakah itu?

• Chrome : halaman kliping, halaman ganda ( hanya itu yang saya butuhkan untuk bekerja )
• Firefox : berfungsi dengan sempurna.
• IE10 : percaya atau tidak, ini sempurna!
• Opera : sangat buggy pada pratinjau cetak

Saya melihat ini sedikit lebih dan masalah sebenarnya tampaknya dengan menetapkan initialke halaman di widthbawah printaturan media. Sepertinya di Chrome width: initialpada .pageelemen menghasilkan penskalaan konten halaman jika tidak ada nilai panjang spesifik yang ditentukan widthpada elemen induk mana pun ( width: initialdalam hal ini memutuskan untuk width: auto... tetapi sebenarnya nilai apa pun lebih kecil dari ukuran yang ditentukan dalam @pageaturan) menyebabkan masalah yang sama).

Jadi tidak hanya konten sekarang terlalu panjang untuk halaman (sekitar 2cm), tetapi juga padding halaman akan sedikit lebih dari yang awal 2cmdan seterusnya (tampaknya membuat konten di bawah width: autodengan lebar ~196mmdan kemudian skala seluruh konten hingga lebar 210mm~ tetapi anehnya faktor penskalaan yang sama persis diterapkan pada konten dengan lebar lebih kecil dari 210mm).

Untuk memperbaiki masalah ini, Anda cukup dengan printaturan media menetapkan lebar dan tinggi kertas A4 ke html, bodyatau langsung ke .pagedan dalam hal ini hindari initialkata kunci.

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{Hal ini tampaknya menjaga semuanya tetap seperti di CSS asli Anda dan memperbaiki masalah di Chrome (diuji di berbagai versi Chrome di Windows, OS X dan Ubuntu).}

CSS

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

DEMO

https://github.com/cognitom/paper-css sepertinya bisa menyelesaikan semua kebutuhan saya.

Kertas CSS untuk pencetakan yang bahagia

Solusi pencetakan front-end - pratinjau dan live-reloadable!