使用CSS3 @page规则设置PDF页眉页脚无效问题求助
2026-7-18
问题原因及解决办法
你的@page规则不生效主要有两个关键原因：
1. CSS样式未正确引入到HTML文档中
你提供的HTML代码里<head>标签是空的，没有包含任何样式代码或样式文件引用，浏览器根本没加载你写的@page规则，自然不会生效。
修复代码
把CSS代码内嵌到HTML的<style>标签中，放在<head>里：
<!DOCTYPE html> <html lang="en"> <head> <style> @page { size: A4; margin: 10%; @bottom-center { content: "Page " counter(page); } } </style> </head> <body> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nam assumenda magni, minima, odit cumque eveniet impedit in vel quasi accusamus fugit reiciendis vitae, consectetur aspernatur error quas dolore possimus.</div> </body> </html>
2. Chrome默认打印页眉页脚的干扰
即使CSS生效，Chrome的打印预览默认会显示自带的页眉（网址、标题）和页脚（页码、日期），这些内容可能会覆盖或隐藏你用@page设置的自定义页脚。
关闭默认页眉页脚的步骤
- 打开打印预览（快捷键
Ctrl+P） - 在预览界面的更多设置里，找到选项区域
- 取消勾选页眉和页脚选项
完成这两步后，你设置的自定义页脚“Page 1”就会正常显示在PDF的底部居中位置了。
内容的提问来源于stack exchange，提问作者medilies
相关产品推荐
相关产品推荐
