时间戳

首页 > 解决方案 > 带有自动分页符的 HTML+CSS A4 页面

html - 带有自动分页符的 HTML+CSS A4 页面

问题描述

我想将 HTML+CSS 文档打印到 A4 纸上。

我的简化代码在这里：

<html>
<head>
<style id="style_A4" media="print">
    @page {
        size:    A4 portrait;
    }
    body {
        width:   210mm;
        height:  297mm;
        padding: 20mm;
    }
</style>
</head>
<body>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 0</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 1</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 2</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 3</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 4</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 5</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 6</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 7</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 8</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 9</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 10</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 11</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 12</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 13</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 14</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 15</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 16</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 17</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 18</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 19</p>
<p>The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. The quick brown dog jumps over the lazy fox while colorless green ideas sleep furiously. - paragraph 20</p>
</body>
</html>

问题如下：所有页面都缺少底部填充，第二页缺少顶部填充，如您在此图像上所见：

填充问题

我发现了许多使用page-break-after: always或应用手动分页符的解决方案page-break-before: always。但是，我希望分页是自动的，并且在所有页面上都强制执行所有填充，就像在 Microsoft Word 中一样。如果它可以在 Chrome 95.0 上运行就足够了。

标签： htmlcsscss-paged-media

解决方案

如果我正确理解您的问题，您可能希望使用页边距而不是body. 确保在打印对话框中将页边距设置为默认值。如果您不这样做，您的自定义页边距（在 CSS 中指定）将被覆盖并且没有效果。

您的样式表看起来像这样：

@page {
  size:    A4 portrait;
  margin: 20mm;
}

body {
  width:   210mm;
  height:  297mm;
}

推荐阅读