Ich muss ein A4-Papier im Web simulieren und zulassen, dass diese Seite so gedruckt wird, wie sie im Browser angezeigt wird (speziell Chrome). Ich habe die Elementgröße auf 21 cm x 29,7 cm eingestellt, aber wenn ich sie zum Drucken (oder zur Druckvorschau) sende, wird meine Seite abgeschnitten.

Sehen Sie dieses Live-Beispiel !

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>

Ich glaube, ich vergesse etwas. Aber was wäre das?

• Chrome : Clipping-Seite, Doppelseite ( es ist genau das, was ich brauche, um zu funktionieren )
• Firefox : Es funktioniert perfekt.
• IE10 : ob Sie es glauben oder nicht, es ist perfekt!
• Opera : sehr fehlerhaft in der Druckvorschau

Ich habe mich etwas genauer damit befasst und das eigentliche Problem scheint darin zu liegen, initialder Seite widthunter der printMedienregel zuzuweisen. In Chrome führt width: initialdas .pageElement anscheinend zu einer Skalierung des Seiteninhalts, wenn für widthkeines der übergeordneten Elemente ein bestimmter Längenwert definiert ist ( width: initialin diesem Fall wird width: auto... aufgelöst, aber tatsächlich ein Wert, der kleiner als die in der @pageRegel definierte Größe ist verursacht das gleiche Problem).

Daher ist nicht nur der Inhalt jetzt zu lang für die Seite (um ungefähr 2cm), sondern auch der Seitenauffüllungsgrad ist etwas größer als der ursprüngliche 2cmWert usw. (es scheint, als würde der Inhalt width: autoauf die Breite des ~196mmgesamten Inhalts gerendert und dann skaliert bis zur Breite von 210mm~, aber seltsamerweise wird genau der gleiche Skalierungsfaktor auf Inhalte mit einer Breite angewendet, die kleiner als 210mm) ist.

Um dieses Problem zu beheben, können Sie einfach in der printMedienregel die A4-Papierbreite und -höhe dem html, bodyoder direkt .pagedem initialSchlüsselwort zuweisen und dieses direkt vermeiden .

DEMO

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

^{Dies scheint alles andere so zu belassen, wie es in Ihrem ursprünglichen CSS ist, und das Problem in Chrome zu beheben (getestet in verschiedenen Versionen von Chrome unter Windows, OS X und 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 scheint alle meine Bedürfnisse zu lösen.

Papier-CSS für fröhliches Drucken

Front-End-Drucklösung - Vorschau und Live-Reload!