CSS @page 无法更新打印 html 页面的页眉和页脚

Question

我尝试了以下代码。 CSS

中使用打印媒体更新打印页面内页眉和页脚的代码的目的

body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
  margin: 10%;
  @top-center { content: "Chapter" counter(chapter) }
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css"/ media="print">
</head>
<body>
<header></header>
<div id="pageHeader">
    <p>This is the Header shown on first page.</p>
</div>
<div id="pageFooter">
    <p>This is the footer shown on last page.</p>
</div>
<section class="page"> 

<h1>Introduction</h1>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>

<p>
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:

</p>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>


 </section>


 </body>
</html>

以下URL是我试过代码的地方 https://www.quackit.com/css/at-rules/css_bottom-center_at-rule.cfm https://www.w3.org/TR/css-page-3/#cascading-and-page-context

但是当我打印它时，它应用来自@page 规则的边距，但不会根据其他定义规则更新页眉和页脚中的内容。我附上了下图，它显示了用于更改特定代码区域的规则

但是当我打印其他@rules 时，除了@page(set margin correct)

我想使用以下 css @rule

更新打印页面中的突出显示区域

@bottom-center
@左下角
@右下角

Answer 1

我的所有 @page css 通过 prince 命令工作，它使用我定义的 css

为我创建 pdf

这意味着我们必须使用 @media print 来定义打印 css

关于打印页面中我的问题中突出显示的页眉和页脚，它们不受 @page 控制，@page 将创建包含所有定义的 pdf css

我们不仅有 prince 工具，还有很多其他通过命令行或 gui 将 html 转换为 pdf 的工具，命令如

prince path/to/book.html --style path/to/book.css --output book.pdf

它为我创建的 pdf

Answer 2

根据屏幕截图页边距中的日期和 URL，您似乎正在使用桌面网络浏览器的“打印”功能。很遗憾 none of them support CSS page-margin boxes (such as @top-center) at the moment.

如果您想自己制作 PDF 文件或纸质副本，请考虑使用专用于打印渲染的工具，例如：

WeasyPrint（免责声明：我已经研究过这个）
Prince
(还有其他的我也不认识)

如果你正在制作一个网站并想控制它如何被其他人的网络浏览器打印，恐怕你运气不好。

CSS @page 无法更新打印 html 页面的页眉和页脚

CSS @page not working for update header and footer of print html page

html

css

media

printing