Muszę zasymulować papier A4 w Internecie i pozwolić na wydrukowanie tej strony, tak jak jest wyświetlana w przeglądarce (konkretnie Chrome). Ustawiam rozmiar elementu na 21 cm x 29,7 cm, ale kiedy wysyłam do wydruku (lub podgląd wydruku), przycina moją stronę.

Zobacz ten przykład na żywo !

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>

Myślę, że coś zapominam. Ale co by to było?

• Chrome : strona przycinająca, podwójna strona ( to po prostu to, czego potrzebuję do działania )
• Firefox : działa idealnie.
• IE10 : wierzcie lub nie, jest idealny!
• Opera : bardzo błędna w podglądzie wydruku

Spojrzałem na to trochę więcej i wydaje się, że rzeczywistym problemem jest przypisywanie initialstrony widthdo printreguły medialnej. Wydaje się, że w Chrome width: initialna .pagewynikach elementów w skalowanie zawartości strony, jeśli wartość nie jest określona długość specyficzne dla widthna każdy z elementów nadrzędnych ( width: initialw tym przypadku postanawia width: auto... ale faktycznie każda wartość mniejsza niż rozmiar określonego zgodnie z @pageregułą powoduje ten sam problem).

Więc nie tylko treść jest teraz zbyt długa dla strony (o około 2cm), ale także dopełnienie strony będzie nieco większe niż początkowe 2cmi tak dalej (wydaje się, że renderuje zawartość width: autodo szerokości, ~196mma następnie skaluje całą zawartość do szerokości 210mm~, ale dziwnie dokładnie ten sam współczynnik skalowania jest stosowany do zawartości o dowolnej szerokości mniejszej niż 210mm).

Aby rozwiązać ten problem, możesz po prostu w printregule nośnika przypisać szerokość i wysokość papieru A4 do html, bodylub bezpośrednio do .pageiw tym przypadku uniknąć initialsłowa kluczowego.

PRÓBNY

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

^{Wygląda na to, że zachowuje wszystko tak, jak jest w oryginalnym CSS i rozwiązuje problem w Chrome (testowany w różnych wersjach Chrome pod Windows, OS X i 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>

PRÓBNY

https://github.com/cognitom/paper-css wydaje się spełniać wszystkie moje potrzeby.

Papier CSS dla szczęśliwego drukowania

Front-end rozwiązanie drukowania - podgląd i do ponownego załadowania na żywo!