HTML页面打印样式结构_HTML文档打印媒体查询设置-html教程-PHP中文网

@media print 必须作为独立样式块写在css中，因浏览器打印引擎仅识别该媒体查询，其他js切换或class控制均无法触发真实打印样式上下文。

html页面打印样式结构_html文档打印媒体查询设置

@media print 必须作为独立样式块存在，不能靠类名切换或 JS 注入替代；否则打印时根本不会生效。

为什么 `@media print` 一定要写在 CSS 里，而不是用 JS 控制显隐

很多人试图用 document.body.classList.add("print-mode") 再配一个 .print-mode .nav { display: none; }，结果打印出来导航栏还在——因为浏览器打印引擎只认 @media print 这个“通关密钥”，其他任何 class 切换、style 属性修改、甚至 iframe 内的 JS 都无法触发真正的打印样式上下文。

常见错误现象：window.print() 后页面看起来变了，但预览/实际输出没变；或者部分样式生效、部分被忽略。

@media print 是浏览器渲染管线中唯一被打印流程识别的媒体类型，其他方式只是“模拟”
如果页面含 <iframe></iframe>，父页的 @media print 不会穿透生效，需单独为 iframe 内容写打印样式或提前提取 DOM
推荐用外部文件 + <link rel="stylesheet" media="print" href="print.css">，比内联 @media print 更早介入渲染树

`@page` 规则必须和 `@media print` 配合使用，否则 A4 尺寸和页边距无效

只写 @media print { body { margin: 10mm; } } 是不够的——这个 margin 作用于内容区域，不是纸张本身。真正控制物理纸张尺寸、边距、方向的是 @page，它必须出现在 @media print 外层或同级，且不能嵌套其中。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

常见错误现象：内容被裁切、左右留白过大、第二页顶部空一大截。

@page { size: A4; margin: 15mm; } 才是设置纸张物理属性的正确写法
@page :first { margin-top: 25mm; } 可单独控制首页页眉空间（如加标题）
不要在 @media print 里写 @page，语法非法，会被整个忽略
部分旧版浏览器（如 IE11）不支持 @page 的所有属性，size 和 margin 是兼容性最好的两个

表格跨页断裂的根本原因是没重置 `display` 和 `page-break-inside`

浏览器默认把 <thead> 当作普通元素处理，跨页时不会自动重复；<code><tr> 默认 display 是 <code>table-row，但某些框架或 reset.css 会覆盖它，导致 page-break-inside: avoid 失效。

常见错误现象：表格在第一页末尾劈开，第二页只剩几行数据、表头消失、列宽错乱。

必须显式写 thead { display: table-header-group; } 和 tfoot { display: table-footer-group; }
tr { page-break-inside: avoid !important; } 要配合 display: table-row !important; 才稳定生效
避免用 flex 或 grid 包裹表格容器，打印引擎对它们支持极弱，一律改用 display: block; width: 100%;
border-collapse: collapse; 必须加，否则双线边框在打印时可能错位或加粗

调试打印样式时最容易忽略的三件事

很多人花半小时调样式，结果一进预览全乱了——不是逻辑错，是调试姿势不对。

别等真连打印机才试，90% 的问题靠浏览器「打印预览」就能暴露；Chrome / Edge 按 Ctrl+P 后点「更多设置」→「另存为 PDF」可快速验证
visibility: hidden 和 opacity: 0 在打印中完全无效，它们不脱离文档流，仍可能被渲染；必须用 display: none !important;
字体栈必须降级：font-family: "Microsoft YaHei", SimSun, sans-serif;，禁用 @font-face；<pre class="brush:php;toolbar:false;"></pre> 和 <code> 块要单独设 font-family: "Courier New", monospace;