window.print() 实战：从局部打印到专业PDF报告生成

1. 从基础打印到专业PDF报告浏览器自带的window.print()功能就像一把瑞士军刀看似简单却能玩出各种花样。记得我第一次接触这个功能时只是简单地点击打印按钮结果整个网页都被打印出来包括导航栏、侧边栏这些根本不需要的内容。后来才发现原来只需要几行CSS代码就能实现精准的局部打印。打印功能的核心原理其实很简单当调用window.print()时浏览器会将当前页面的内容转换为PDF格式。这个过程中我们可以通过CSS的media print媒体查询来控制哪些元素显示、如何分页、页眉页脚等。比如在企业级数据报告中我们通常需要隐藏不必要的页面元素导航栏、按钮等添加专业的封面页控制表格分页避免截断自定义页眉页脚设置合适的页面边距下面这段代码展示了最基本的打印区域控制div idreport !-- 这是我们要打印的内容 -- div classcontent.../div /div button onclickprintReport()打印/button script function printReport() { const printContent document.getElementById(report).innerHTML; document.body.innerHTML printContent; window.print(); window.location.reload(); // 打印后恢复页面 } /script style media print { /* 隐藏所有非打印内容 */ body *:not(#report) { display: none; } /* 设置打印页边距 */ page { margin: 1cm; } } /style2. 专业报告必备的打印技巧2.1 完美的封面设计专业报告的第一印象来自封面。通过CSS的page-break-after: always属性可以确保封面独占一页。我建议将封面内容放在一个单独的div中默认隐藏只在打印时显示div classreport-cover styledisplay:none; h1企业年度评级报告/h1 p报告日期2023年12月/p /div style media print { .report-cover { display: block; text-align: center; page-break-after: always; font-family: Microsoft YaHei, sans-serif; } } /style在实际项目中我发现封面设计有几个关键点使用较大的字体和居中对齐添加企业logo使用绝对路径图片包含报告基本信息和日期确保有足够的留白空间2.2 表格分页处理技巧表格是报告中最容易出问题的部分。当表格跨页时经常会出现行被截断的情况。经过多次尝试我总结出几个解决方案media print { /* 方案1避免表格行被截断 */ tr { page-break-inside: avoid; } /* 方案2确保表头在每页重复 */ thead { display: table-header-group; } /* 方案3大型表格强制分页 */ .big-table { page-break-before: always; } }对于动态生成的表格还需要注意使用原生HTML表格而非框架组件如Element UI表格设置固定布局table-layout: fixed防止内容溢出为单元格添加word-break: break-word确保长文本自动换行3. 高级打印控制与页面布局3.1 自定义页眉页脚浏览器默认的页眉页脚往往不符合专业报告要求。通过page规则我们可以实现完全自定义page { size: A4 portrait; margin: 2cm 1.5cm 3cm 1.5cm; bottom-center { content: 第 counter(page) 页; font-size: 10pt; border-top: 1px solid #ddd; padding-top: 5px; } top-right { content: 企业机密; color: #999; font-size: 9pt; } }在实际项目中我经常需要添加页码使用counter(page)插入公司名称和报告标题为机密文档添加水印设置不同的奇偶页样式3.2 页面方向与边距控制不同的内容可能需要不同的页面方向。通过size属性可以灵活控制/* 纵向页面 */ page portrait { size: A4 portrait; margin: 2cm; } /* 横向页面 */ page landscape { size: A4 landscape; margin: 1.5cm; } /* 应用到特定章节 */ .section-charts { page: landscape; }对于政府或金融机构的报告还需要注意遵循行业标准的页边距如GB/T 9704-2012为装订预留额外边距设置不同的左右页边距双面打印时4. 实战完整的企业报告打印方案结合多年的项目经验我总结出一个企业级报告打印的最佳实践方案HTML结构优化div idreport-container !-- 封面 -- div classcover.../div !-- 目录 -- div classtoc.../div !-- 正文内容 -- div classcontent section classsummary.../section section classdetails.../section section classtables.../section /div !-- 附录 -- div classappendix.../div /divCSS打印样式表media print { /* 基础重置 */ body { font-size: 12pt; line-height: 1.5; color: #000; } /* 页面设置 */ page { size: A4 portrait; margin: 2cm 1.5cm 3cm 1.5cm; bottom-center { content: counter(page); font-size: 10pt; } } /* 封面样式 */ .cover { page-break-after: always; height: 297mm; display: flex; flex-direction: column; justify-content: center; } /* 避免标题孤行 */ h1, h2, h3 { page-break-after: avoid; } /* 表格优化 */ table { page-break-inside: auto; } tr { page-break-inside: avoid; } /* 附录分页 */ .appendix { page-break-before: always; } }JavaScript增强function prepareForPrint() { // 处理动态内容 document.querySelectorAll(.dynamic-date).forEach(el { el.textContent new Date().toLocaleDateString(); }); // 添加打印水印 const watermark document.createElement(div); watermark.className watermark; document.body.appendChild(watermark); // 触发打印 setTimeout(() { window.print(); window.location.reload(); }, 500); } // 打印按钮事件 document.getElementById(print-btn).addEventListener(click, prepareForPrint);在实际开发中还需要考虑打印前的数据加载状态打印过程中的加载动画打印后的页面恢复移动端适配问题浏览器兼容性处理通过这套方案我们成功为多家金融机构实现了专业级的报告打印功能用户反馈打印效果完全可以满足正式文档的要求而且开发维护成本远低于传统的PDF生成方案。