CSS @page 不适用于更新打印 html 页面的页眉和页脚
[英]CSS @page not working for update header and footer of print html page
问题描述
I tried following code.
我尝试了以下代码。 The purpose of code to update header and footer inside printed page using print media in CSS使用 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>
This following URL are the places from I tried code 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以下 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
But When I print it apply margin from @page rule, but does not update content in header and footer from other define rules.但是当我打印它时，它会从 @page 规则中应用边距，但不会从其他定义规则中更新页眉和页脚中的内容。 I attached following picture it is showing what rules are using for change specific area of code我附上了下图，它显示了用于更改特定代码区域的规则
But When I print other @rules not work except @page( set margin correct)但是当我打印其他@rules 时，除了@page（设置边距正确）
I want to update highlighted area in printed page using below css @rule我想使用下面的 css @rule 更新打印页面中突出显示的区域
- @bottom-center @底部中心
- @bottom-left-corner @左下角
- @bottom-right-corner @右下角
2 个解决方案
解决方案1
1 2021-05-06 20:43:22
Based on the date and URL in the page margins in the screenshot, it looks like you're using the “Print” functionality of a desktop web browser.根据屏幕截图页边距中的日期和 URL，您似乎正在使用桌面网络浏览器的“打印”功能。 Unfortunately none of them support CSS page-margin boxes (such as @top-center ) at the moment .不幸的是，目前它们都不支持 CSS 页边距框（例如@top-center ） 。
If you want to produce a PDF file or paper copy yourself, consider using a tool dedicated to print rendering such as:如果您想自己制作 PDF 文件或纸质副本，请考虑使用专用于打印渲染的工具，例如：
- WeasyPrint (disclaimer: I've worked on this one) WeasyPrint （免责声明：我已经研究过这个）
- Prince王子
- (There are others but I don't know them as well) （还有其他的，但我也不认识）
If you're making a website and want to control how it's gonna be printed by other people's web browsers, I'm afraid you're out of luck.如果您正在制作一个网站并希望控制其他人的网络浏览器将如何打印它，恐怕您不走运了。
解决方案2
0 已采纳 2021-05-06 16:42:32
my all @page css work through prince command it create pdf for me with my defined css我所有的@page css 都通过 Prince 命令工作，它使用我定义的 css 为我创建 pdf
its mean we have to use @media print for define print css这意味着我们必须使用@media print来定义打印 css
about highlighted headers and footers in my question in print page they are not controlled through @page , @page will create pdf with all define css关于打印页面中我的问题中突出显示的页眉和页脚，它们不是通过@page控制的， @page将创建所有定义 css 的 pdf
We have not only prince tool, there are many others convert html to pdf through command line or gui, command like我们不仅有王子工具，还有许多其他工具可以通过命令行或 gui 将 html 转换为 pdf，命令如
prince path/to/book.html --style path/to/book.css --output book.pdf
The pdf it creates for me它为我创建的 pdf
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.