开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
在数字化办公日益普及的今天，网页打印功能仍然是企业文档、报告生成的重要需求。一个优雅的打印样式不仅能提升专业度，还能避免打印时出现排版错乱、内容截断等问题。本文将详细讲解如何使用HTML和CSS实现专业的打印样式，并提供可直接使用的代码示例。
基础原理：@media print 媒体查询
实现打印样式的核心是CSS的@media print媒体查询。通过该特性，我们可以为打印设备单独定义样式规则，而不影响屏幕显示效果：
css
1@media print {
2 /* 打印专用样式 */
3}
4核心实现技巧
1. 隐藏非必要元素
打印时通常需要隐藏导航栏、侧边栏、广告等屏幕专用元素：
css
1@media print {
2 header, aside, .ad-container, .no-print {
3 display: none !important;
4 }
5}
62. 优化页面布局
调整页面尺寸和边距，确保内容适合A4纸张：
css
1@media print {
2 body {
3 width: 210mm; /* A4纸宽度 */
4 margin: 10mm; /* 页边距 */
5 font-size: 12pt;
6 line-height: 1.5;
7 }
8}
93. 智能分页控制
使用page-break属性控制内容分页，避免重要内容被截断：
css
1@media print {
2 .page-break {
3 page-break-before: always; /* 在元素前分页 */
4 }
5
6 table {
7 page-break-inside: avoid; /* 防止表格跨页 */
8 }
9}
104. 添加页眉页脚
通过CSS生成内容实现页码和文档标题：
css
1@media print {
2 @page {
3 margin: 20mm 15mm;
4
5 @top-center {
6 content: "公司内部报告";
7 font-size: 10pt;
8 }
9
10 @bottom-right {
11 content: "第 " counter(page) " 页";
12 font-size: 10pt;
13 }
14 }
15}
165. 背景颜色处理
强制打印背景颜色（默认浏览器不打印背景）：
css
1@media print {
2 body {
3 -webkit-print-color-adjust: exact;
4 print-color-adjust: exact;
5 }
6}
7完整示例代码
以下是一个可直接使用的完整示例：
html
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <title>专业打印样式示例</title>
6 <style>
7 /* 屏幕显示样式 */
8 body {
9 max-width: 800px;
10 margin: 0 auto;
11 padding: 20px;
12 }
13
14 header, footer {
15 background: #333;
16 color: white;
17 padding: 10px;
18 }
19
20 /* 打印样式 */
21 @media print {
22 body {
23 width: 210mm;
24 margin: 10mm;
25 font-size: 12pt;
26 line-height: 1.5;
27 -webkit-print-color-adjust: exact;
28 print-color-adjust: exact;
29 }
30
31 header, footer, .no-print {
32 display: none !important;
33 }
34
35 @page {
36 margin: 20mm 15mm;
37
38 @top-center {
39 content: "年度销售报告";
40 font-size: 10pt;
41 font-weight: bold;
42 }
43
44 @bottom-right {
45 content: "第 " counter(page) " 页";
46 font-size: 10pt;
47 }
48 }
49
50 .page-break {
51 page-break-before: always;
52 }
53
54 table {
55 width: 100%;
56 border-collapse: collapse;
57 page-break-inside: avoid;
58 }
59
60 th, td {
61 border: 1px solid #000;
62 padding: 5mm;
63 }
64 }
65 </style>
66</head>
67<body>
68 <header>
69 <h1>公司年报系统</h1>
70 </header>
71
72 <main>
73 <h2>年度销售报告</h2>
74 <p>本报告包含2025年度销售数据分析和市场趋势预测...</p>
75
76 <div class="page-break"></div>
77
78 <table>
79 <thead>
80 <tr>
81 <th>产品名称</th>
82 <th>季度销量</th>
83 <th>同比增长</th>
84 </tr>
85 </thead>
86 <tbody>
87 <tr>
88 <td>智能手表</td>
89 <td>12,450</td>
90 <td>+18%</td>
91 </tr>
92 <!-- 更多数据行 -->
93 </tbody>
94 </table>
95 </main>
96
97 <footer class="no-print">
98 <p>本页面支持专业打印样式，按Ctrl+P预览效果</p>
99 </footer>
100</body>
101</html>
102调试与优化技巧
- 实时预览：使用浏览器开发者工具的打印预览功能（通常通过Ctrl+P触发）
- 响应式调试：在CSS中添加临时边框辅助调试
css
1@media print { 2 * { 3 border: 1px solid red !important; 4 } 5} 6 - 跨浏览器兼容：测试Chrome、Firefox、Edge等主流浏览器的打印效果
- 打印设置：建议用户设置”背景图形”打印选项以显示背景颜色
高级应用场景
动态内容打印
通过JavaScript动态生成打印内容：
javascript
1function printDiv(divId) {
2 const printContents = document.getElementById(divId).innerHTML;
3 const originalContents = document.body.innerHTML;
4
5 document.body.innerHTML = printContents;
6 window.print();
7 document.body.innerHTML = originalContents;
8}
9打印样式优化
- 使用绝对单位（mm/cm）替代相对单位
- 避免使用float布局，改用flex或grid
- 图片处理：设置max-width: 100%防止溢出
- 链接处理：打印时显示完整URL
css
1@media print { 2 a[href]:after { 3 content: " (" attr(href) ")"; 4 } 5} 6
总结
实现优雅的打印样式需要综合考虑页面布局、分页控制、内容优化等多个方面。通过合理使用CSS媒体查询和打印特性，我们可以创建出既美观又实用的打印文档。记住测试不同浏览器的打印效果，并根据实际需求调整样式参数。
掌握这些技巧后，你就能创建出专业级的打印样式，提升文档的专业度和用户体验。现在就打开你的编辑器，尝试实现这些打印样式技巧吧！
