打印样式设计

打印样式设计的基本概念

打印样式设计是指为网页内容在打印输出时提供专门的样式规则。虽然现代网页主要针对屏幕显示优化，但打印场景仍然广泛存在，比如打印订单、报表、文章等。CSS3提供了专门的@media print规则来控制打印时的样式表现。

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: black;
    background: none;
  }
  
  .no-print {
    display: none;
  }
}

打印样式的特殊考虑因素

打印介质与屏幕显示有显著差异：纸张尺寸固定、不支持动画、色彩表现有限、分页不可避免。设计打印样式时需要特别注意：

1. 单位使用：推荐使用pt(点)、cm(厘米)等绝对单位
2. 颜色处理：优先使用黑白或高对比度配色
3. 背景处理：通常需要去除背景色和背景图片
4. 链接处理：建议显示链接的实际URL

@media print {
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
  
  .banner {
    display: none;
  }
}

分页控制技巧

CSS3提供了专门控制分页的属性，可以避免内容被不恰当地分割：

@media print {
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  table {
    page-break-inside: avoid;
  }
  
  .page-break {
    page-break-before: always;
  }
}

常用分页属性：

• page-break-before: 元素前分页
• page-break-after: 元素后分页
• page-break-inside: 避免元素内部分页
• orphans: 控制段落留在页底的最小行数
• widows: 控制段落转到下一页的最小行数

打印专用的布局调整

打印布局通常需要简化导航、广告等非主要内容，专注于核心内容：

@media print {
  nav, .ad-container, .sidebar {
    display: none;
  }
  
  main {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
}

对于多列布局，打印时通常改为单列：

@media print {
  .multi-column {
    column-count: 1 !important;
  }
}

打印优化的实用技巧

1. 添加打印专用的页眉页脚：

@page {
  margin: 2cm;
  
  @top-center {
    content: "公司名称";
    font-size: 10pt;
  }
  
  @bottom-right {
    content: "第 " counter(page) " 页";
    font-size: 9pt;
  }
}

2. 处理打印时的表格表现：

@media print {
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
}

3. 控制图片和背景的打印：

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .watermark {
    opacity: 0.2;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }
}

高级打印功能实现

1. 生成目录和页码：

@media print {
  h1 {
    counter-reset: h2counter;
  }
  
  h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ". ";
  }
  
  .toc a::after {
    content: leader('.') target-counter(attr(href), page);
  }
}

2. 处理打印时的交互元素：

@media print {
  button, .dropdown, form input[type="submit"] {
    display: none;
  }
  
  input[type="text"], textarea {
    border: 1px solid #ccc;
    background: none;
  }
}

3. 打印二维码或条形码：

<div class="print-barcode">
  <svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
    <!-- 条形码SVG内容 -->
  </svg>
</div>

<style>
@media print {
  .print-barcode {
    display: block;
    margin: 10px 0;
  }
}
</style>

浏览器兼容性处理

不同浏览器对打印样式的支持有差异，需要特别注意：

/* Firefox特定打印样式 */
@-moz-document url-prefix() {
  @media print {
    body {
      font-size: 11pt;
    }
  }
}

/* Chrome打印边距问题 */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  
  @page {
    size: auto;
    margin: 20mm;
  }
}

实际应用案例分析

电商订单打印样式示例：

@media print {
  .order-print {
    font-family: "SimSun", serif;
    width: 210mm;
    margin: 0 auto;
  }
  
  .order-header {
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  
  .order-items {
    width: 100%;
    margin-bottom: 30px;
  }
  
  .order-items th {
    background: #eee;
    text-align: left;
    padding: 5px;
  }
  
  .order-items td {
    padding: 5px;
    border-bottom: 1px dotted #ccc;
  }
  
  .order-total {
    text-align: right;
    font-weight: bold;
    margin-top: 20px;
  }
  
  .order-footer {
    margin-top: 50px;
    font-size: 0.9em;
  }
}

打印样式调试方法

1. 使用浏览器打印预览功能
2. 临时强制应用打印样式：

// 在控制台临时应用打印样式
const style = document.createElement('style')
style.innerHTML = '@media print { ' + 
                   document.querySelector('[media="print"]').innerHTML + 
                   ' }'
document.head.appendChild(style)

3. 使用PDF打印机驱动测试实际输出效果
4. 检查打印日志：

@media print {
  /* 打印时在页面添加调试信息 */
  body::after {
    content: "打印时间: " attr(data-print-time);
    display: block;
    font-size: 8pt;
    text-align: right;
    color: #999;
  }
}

性能优化的打印样式

1. 精简打印样式表：

@media print {
  /* 只覆盖必要的样式 */
  * {
    float: none !important;
    text-shadow: none !important;
  }
  
  /* 避免不必要的重绘 */
  .animated {
    animation: none !important;
    transition: none !important;
  }
}

2. 使用打印专用的字体：

@font-face {
  font-family: 'PrintFont';
  src: local('Times New Roman');
}

@media print {
  body {
    font-family: 'PrintFont', serif;
  }
}

3. 优化图片打印质量：

@media print {
  .high-res-image {
    -webkit-print-image-resolution: 300dpi;
    print-image-resolution: 300dpi;
  }
}