我无法在打印模式下提供页面填充

Question

我们正在动态创建 PDF，由于内容长度不同，其中一些内容会溢出到下一页。虽然我们已经设法防止内容与分页符重叠，但我们仍在努力为移动到下一页的文本保持适当的填充。这变得非常令人沮丧。

在@page上使用边距解决了填充问题，但它产生了另一个问题：背景颜色不再覆盖整个宽度和高度，这对于我们的密集设计至关重要。我们需要背景完全覆盖页面。 在此输入图片描述

 jsfiddle.net/sxehk7Lb 

我们尝试使用@page规则设置边距，以确保内容不会与分页符重叠并保持适当的填充。然而，虽然这种方法解决了填充问题，但它导致背景颜色无法延伸到页面的整个宽度和高度，而这是我们设计的关键要求。我们希望找到一种解决方案，既能保持全页背景覆盖，又能保持内容的适当填充。

Answer 1

PDF 页面不是可流动的对象。每个页面都是一个独立的对象，因此页面内容应该能够支持/反映交错渲染，如下面的解决方案所示。表格和列表不能被视为跨页，而是必须在页面之间划分。

在将 HTML 可流动对象转换为 PDF 单独对象而不进行换行或溢出时，这会导致频繁出现问题。

另一个问题是，打印的 PDF 页面必须在开始时声明为无尺寸

/MediaBox [x1 y1 x2 y2]

，对于英制，这些未定义的单位默认为标称打印机点 [0 0 612 792]，但 HTML 喜欢使用标称密度为 96 个像素的像素。屏幕英寸。

因此，折衷方案是将打印“Letter”页面尺寸声明为 816 x 1056 像素。对于公制，我们认为为 794 x 1123 像素，因此在为全球市场做准备时会出现问题，并且许多应用程序未能考虑无边距整页打印的双重要求。

因此介质打印必须是一种固定尺寸或另一种。

当前代码无法可靠工作，因为不满足上述 PDF 要求。

@page {
        size: auto;
        margin: 0;
      }

      @media print {
        body {
          -webkit-print-color-adjust: exact;
          margin: 0;
        }

工作顺序需要更改为

@media print {
  @page {
        size: A4;
        margin: 0;
        }
        body {
          -webkit-print-color-adjust: exact;
          margin: 0;
        }
}

工作内容长度不得溢出这些值，否则会出现侧面溢出到空白页的情况。