@media print page size = A4 генерирует страницу чуть большего размера, а границы переходят на предыдущую страницу - PullRequest
Новая
       5

@media print page size = A4 генерирует страницу чуть большего размера, а границы переходят на предыдущую страницу

1 голос
/ 21 марта 2019

Я пытаюсь создать книгу, используя веб-дизайн.Для этого мне нужна страница формата А4 с рамкой вокруг страницы.Если граница достигается вместе с указанными разрывами страниц, достижение остальной части дизайна должно быть относительно простым.

Проблема сейчас в том, что границы от последующей страницы слегка закрадываются к предыдущей странице.

page-break-after: always; также не работает для .page

First Page

Last Page

Required Output

Мой код: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JSS Report</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>

  <style>
    @media print {
      @page {
        size: A4;
        width: 210mm;
        height: 297mm;
        margin: 1cm;
        margin-left: 1.5cm;
        box-sizing: border-box;
        border-style: solid;
        border-color: green;
        border-width: medium;
      }
      body {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
      }
      .page {
        display: flex;
        width: calc(210mm - 2.5cm);
        height: calc(297mm - 2cm);
        flex-direction: column;
        align-content: center;
        justify-content: center;
        box-sizing: border-box;
        box-shadow: inset 5px 5px red, inset -5px -5px red;
        page-break-after: always;
        /*Not Working*/
      }
    }
  </style>
</head>

<body>
  <div class="page">
    Hello Page 1
  </div>
  <div class="page">
    Hello Page 2
  </div>
  <div class="page">
    Hello Page 3
  </div>
  <div class="page">
    Hello Page 4
  </div>
  <div class="page">
    Hello Page 5
  </div>
  <div class="page">
    Hello Page 6
  </div>
  <div class="page">
    Hello Page 7
  </div>
  <div class="page">
    Hello Page 8
  </div>
</body>

</html>

Сгенерированный файл PDF имеет размер => 8,28 дюйма x 11,69 дюйма
, тогда как лист A4 должен иметь размер => 8,27 дюйма x 11,69 дюйма

Я думаю, что это причина того, что границы от следующей страницы немного поползли к предыдущей странице.

Что я пробовал:
стиль границы: сплошной; цвет границы:красный;
Размер поля: рамка-граница;

Я сопротивляюсь использованию API генератора PDF или библиотек.Они действительно нужны мне для создания простой страницы с рамками и разрывами страниц?

1 Ответ

0 голосов
/ 21 марта 2019

Это сделало работу за меня: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JSS Report</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>

  <style>
    @media print {
      @page {
        size: A4;
        box-sizing: border-box;
        border-style: solid;
        border-color: green;
        border-width: medium;
      }
      body {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
      }
      .page {
        display: flex;
        width: calc(100vw - 2.5cm);
        height: calc(100vh - 2cm);
        margin: 1cm;
        margin-left: 1.5cm;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        box-sizing: border-box;
        box-shadow: inset 5px 5px red, inset -5px -5px red;
        page-break-after: always;
        /*Not Working*/
      }
    }
  </style>
</head>

<body>
  <div class="page">
    Hello Page 1
  </div>
  <div class="page">
    Hello Page 2
  </div>
  <div class="page">
    Hello Page 3
  </div>
  <div class="page">
    Hello Page 4
  </div>
  <div class="page">
    Hello Page 5
  </div>
  <div class="page">
    Hello Page 6
  </div>
  <div class="page">
    Hello Page 7
  </div>
  <div class="page">
    Hello Page 8
  </div>
</body>

</html>

Я установил поля на страницах и использовал vw и vh для расчетов.Может быть, вычисление см неточно?

Не очень хороший ответ, поскольку я не знаю, почему это работает, а ваше решение нет, но я надеюсь, что лучше, чем ничего.

...