@media打印页面尺寸= A4正在生成稍大的页面，边框正在流入上一页

问题描述 投票：1回答：1

我正在尝试使用网页设计创建一本书。为此，我需要一个A4页面，页面周围有框边框。如果边界是与指定的分页符一起实现的，那么实现其余的设计应该相对容易。

现在的问题是，后续页面的边框略微进入上一页。

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.28in x 11.69in 而A4纸的尺寸应为>> 8.27英寸x 11.69英寸

我认为这就是为什么后续页面的边界略微进入上一页的原因。

我尝试过的： border-style: solid;border-color: red; box-sizing: border-box;

我拒绝使用PDF生成器API或库。我是否真的需要它们制作带边框和分页符的简单页面？

html css html5 css3 media-queries
1个回答
0
投票

这对我有用：

<!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进行计算。可能是cm计算不准确吗？

不是一个非常好的答案，因为我不知道这个有效的原因而你的解决方案没有，但我希望更好。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.