Question

我正在尝试使用网页设计来创建一本书。为此，我需要一个A4页面，该页面四周带有边框。如果边框随着指定的分页符一起实现，则完成其余设计应该相对容易。

现在的问题是，下一页的边框略微移至上一页。

page-break-after: always;也不适用于.page

我的代码：

<!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英寸

我认为这就是为什么下一页的边框略微爬到上一页的原因。

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

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

Answer 1

这为我完成了工作：

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

这不是一个很好的答案，因为我不知道这种方法有效的原因，而您的解决方案也无效，但是我希望总比没有好。

@media打印页面大小= A4正在生成稍大的页面，并且边框正在渗入上一页

1 个答案: