跳至主要內容

打印样式

Kpsmart2025年3月2日大约 11 分钟

CSS打印样式

概述

CSS 打印样式是一种特殊的样式表，专门用于控制网页在打印时的呈现方式。通过合理设置打印样式，可以优化打印输出，节省墨水和纸张，并提供更好的用户体验。本文将详细介绍 CSS 打印样式的基本概念、实际应用以及最佳实践，帮助您创建适合打印的网页设计。

目录

基本概念

什么是打印样式

打印样式是一种特定的 CSS 样式，用于控制网页在打印预览和实际打印时的外观。它允许开发者为打印媒介创建专门的样式规则，这些规则可能与屏幕显示的样式完全不同。

为什么需要打印样式

尽管我们生活在数字时代，但打印仍然是信息传递的重要方式。合理的打印样式可以：

  1. 提高可读性：优化字体大小、行高和对比度，使打印内容易于阅读
  2. 节省资源：隐藏不必要的元素，减少墨水和纸张的使用
  3. 保持品牌一致性：确保打印输出与品牌形象保持一致
  4. 改善用户体验：为需要打印网页内容的用户提供更好的体验

打印样式表

定义打印样式表

有三种主要方法可以定义打印样式：

1. 使用媒体查询

@media print {
  /* 打印样式规则 */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
}

2. 使用 link 标签

<!-- 屏幕样式 -->
<link rel="stylesheet" href="screen.css" media="screen">
<!-- 打印样式 -->
<link rel="stylesheet" href="print.css" media="print">

3. 使用 @import 规则

/* 在主样式表中导入打印样式 */
@import url('print.css') print;

打印媒体特性

可以结合媒体特性进一步细化打印样式：

/* 针对彩色打印机 */
@media print and (color) {
  .chart {
    /* 彩色打印机特定样式 */
  }
}

/* 针对黑白打印机 */
@media print and (monochrome) {
  .chart {
    /* 黑白打印机特定样式 */
  }
}

页面设置

页面尺寸和方向

@media print {
  @page {
    size: A4; /* 可选值: A5, A4, A3, B5, letter, legal 等 */
    margin: 2cm; /* 页面边距 */
  }
  
  @page :first {
    margin-top: 3cm; /* 首页特殊边距 */
  }
  
  /* 横向打印 */
  .landscape-section {
    page: landscape;
  }
  
  @page landscape {
    size: landscape; /* 或 size: A4 landscape; */
  }
}

分页控制

控制元素在打印时的分页行为：

@media print {
  /* 避免元素内部分页 */
  h1, h2, h3, 
  table, figure, 
  .avoid-break {
    page-break-inside: avoid;
  }
  
  /* 元素前分页 */
  h1, h2, section {
    page-break-before: always;
  }
  
  /* 元素后不分页 */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  /* 孤行寡行控制 */
  p {
    orphans: 3; /* 段落底部最少保留3行 */
    widows: 3; /* 段落顶部最少保留3行 */
  }
}

页眉和页脚

使用 CSS 生成内容创建页眉和页脚：

@media print {
  @page {
    @top-center {
      content: "公司报告";
    }
    
    @bottom-right {
      content: "第 " counter(page) " 页，共 " counter(pages) " 页";
    }
  }
  
  /* 首页不显示页眉 */
  @page :first {
    @top-center {
      content: none;
    }
  }
}

内容优化

隐藏不必要的元素

@media print {
  /* 隐藏不需要打印的元素 */
  nav, 
  .sidebar,
  .ads,
  .comments,
  .social-buttons,
  button,
  .video-player,
  footer {
    display: none !important;
  }
}

调整颜色和背景

@media print {
  /* 基本颜色优化 */
  body {
    color: black;
    background: white;
    background-image: none;
  }
  
  /* 链接颜色 */
  a {
    color: #000;
    text-decoration: underline;
  }
  
  /* 保留某些元素的背景色 */
  .important-notice {
    background-color: #f8f8f8 !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}

优化字体和文本

@media print {
  /* 使用适合打印的字体 */
  body {
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    line-height: 1.5;
  }
  
  /* 标题样式 */
  h1 {
    font-size: 18pt;
    margin-top: 0.5cm;
  }
  
  h2 {
    font-size: 16pt;
    margin-top: 0.5cm;
  }
  
  /* 确保文本可读性 */
  p, li, td, th {
    font-size: 11pt;
    line-height: 1.4;
  }
}

显示链接 URL

@media print {
  /* 在链接后显示 URL */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
    font-style: italic;
  }
  
  /* 不显示内部链接的 URL */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  
  /* 不显示图片链接的 URL */
  a[href]:has(img):after {
    content: "";
  }
}

实际应用

文档打印样式

适用于文章、报告等文本内容的打印样式：

@media print {
  /* 基本设置 */
  body {
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
  }
  
  /* 页面设置 */
  @page {
    size: A4;
    margin: 2cm;
  }
  
  /* 内容容器 */
  .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  
  /* 标题样式 */
  h1 {
    font-size: 18pt;
    margin: 0 0 0.5cm;
    page-break-after: avoid;
  }
  
  h2 {
    font-size: 16pt;
    margin: 0.5cm 0 0.3cm;
    page-break-after: avoid;
  }
  
  h3 {
    font-size: 14pt;
    margin: 0.5cm 0 0.3cm;
    page-break-after: avoid;
  }
  
  /* 段落样式 */
  p {
    margin: 0 0 0.3cm;
    orphans: 3;
    widows: 3;
  }
  
  /* 列表样式 */
  ul, ol {
    margin: 0.3cm 0;
    padding-left: 1cm;
  }
  
  li {
    margin-bottom: 0.2cm;
  }
  
  /* 表格样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5cm 0;
    page-break-inside: avoid;
  }
  
  th, td {
    border: 1pt solid #ddd;
    padding: 0.2cm;
    text-align: left;
  }
  
  /* 图片样式 */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  /* 隐藏元素 */
  header, nav, footer, .sidebar, .ads, .comments, .no-print {
    display: none;
  }
  
  /* 链接处理 */
  a {
    color: #000;
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  
  /* 分页控制 */
  section, article {
    page-break-inside: avoid;
  }
  
  .page-break {
    page-break-before: always;
  }
}

数据表格打印样式

适用于数据表格的打印样式：

@media print {
  /* 表格容器 */
  .table-container {
    width: 100%;
    overflow: visible;
  }
  
  /* 表格样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
  }
  
  /* 表头样式 */
  thead {
    display: table-header-group;
  }
  
  /* 在多页表格中重复表头 */
  thead tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  
  /* 表格行 */
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  
  /* 表格单元格 */
  th, td {
    border: 1pt solid #ddd;
    padding: 0.2cm;
    text-align: left;
  }
  
  /* 表头背景 */
  th {
    background-color: #f2f2f2 !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
  
  /* 斑马条纹 */
  tr:nth-child(even) {
    background-color: #f9f9f9 !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
  
  /* 表格脚注 */
  tfoot {
    display: table-footer-group;
  }
}

发票/收据打印样式

适用于发票或收据的打印样式：

@media print {
  /* 页面设置 */
  @page {
    size: A4;
    margin: 1.5cm;
  }
  
  /* 基本样式 */
  body {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }
  
  /* 发票容器 */
  .invoice {
    width: 100%;
    max-width: none;
  }
  
  /* 发票头部 */
  .invoice-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1cm;
  }
  
  /* 公司信息 */
  .company-info {
    width: 60%;
  }
  
  /* 发票信息 */
  .invoice-info {
    width: 35%;
    text-align: right;
  }
  
  /* 客户信息 */
  .customer-info {
    margin-bottom: 1cm;
  }
  
  /* 发票表格 */
  .invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1cm;
  }
  
  .invoice-table th,
  .invoice-table td {
    border: 1pt solid #ddd;
    padding: 0.2cm;
  }
  
  /* 发票合计 */
  .invoice-total {
    width: 40%;
    margin-left: auto;
  }
  
  .invoice-total table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .invoice-total td {
    padding: 0.2cm;
  }
  
  .invoice-total .grand-total {
    font-weight: bold;
    font-size: 12pt;
  }
  
  /* 发票页脚 */
  .invoice-footer {
    margin-top: 1cm;
    padding-top: 0.5cm;
    border-top: 1pt solid #ddd;
    font-size: 10pt;
    text-align: center;
  }
}

高级技巧

打印特定区域

使用 JavaScript 打印页面的特定部分：

<div id="printable-area">
  <!-- 要打印的内容 -->
</div>

<button onclick="printContent()">打印内容</button>

<script>
function printContent() {
  // 保存原始页面内容
  const originalContent = document.body.innerHTML;
  
  // 获取要打印的内容
  const printableContent = document.getElementById('printable-area').innerHTML;
  
  // 替换页面内容为要打印的内容
  document.body.innerHTML = printableContent;
  
  // 调用打印功能
  window.print();
  
  // 恢复原始页面内容
  document.body.innerHTML = originalContent;
}
</script>

条件打印样式

根据用户选择应用不同的打印样式：

<div class="print-options">
  <label>
    <input type="checkbox" id="print-images" checked> 打印图片
  </label>
  <label>
    <input type="checkbox" id="print-comments"> 打印评论
  </label>
</div>

<style>
  @media print {
    .print-options {
      display: none;
    }
    
    .images {
      display: var(--print-images, block);
    }
    
    .comments {
      display: var(--print-comments, none);
    }
  }
</style>

<script>
  document.getElementById('print-images').addEventListener('change', function() {
    document.documentElement.style.setProperty('--print-images', this.checked ? 'block' : 'none');
  });
  
  document.getElementById('print-comments').addEventListener('change', function() {
    document.documentElement.style.setProperty('--print-comments', this.checked ? 'block' : 'none');
  });
</script>

打印预览

创建简单的打印预览功能：

<button onclick="showPrintPreview()">打印预览</button>

<div id="print-preview-overlay" style="display: none;">
  <div class="preview-controls">
    <button onclick="closePrintPreview()">关闭预览</button>
    <button onclick="window.print()">打印</button>
  </div>
  <div id="print-preview-content"></div>
</div>

<style>
  #print-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    overflow: auto;
    padding: 20px;
  }
  
  .preview-controls {
    position: sticky;
    top: 0;
    background: white;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }
  
  #print-preview-content {
    max-width: 21cm;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 2cm;
    min-height: 29.7cm;
  }
  
  @media print {
    .preview-controls {
      display: none;
    }
    
    #print-preview-content {
      box-shadow: none;
      padding: 0;
    }
  }
</style>

<script>
  function showPrintPreview() {
    // 获取要打印的内容
    const content = document.getElementById('printable-area').cloneNode(true);
    
    // 填充预览区域
    document.getElementById('print-preview-content').innerHTML = '';
    document.getElementById('print-preview-content').appendChild(content);
    
    // 显示预览
    document.getElementById('print-preview-overlay').style.display = 'block';
    
    // 应用打印样式
    document.body.classList.add('print-preview-mode');
  }
  
  function closePrintPreview() {
    document.getElementById('print-preview-overlay').style.display = 'none';
    document.body.classList.remove('print-preview-mode');
  }
</script>

浏览器兼容性

支持情况

特性ChromeFirefoxSafariEdge
基本打印样式完全支持完全支持完全支持完全支持
@page 规则部分支持部分支持部分支持部分支持
页眉页脚不支持部分支持不支持不支持
分页控制支持支持部分支持支持
打印背景色需用户设置需用户设置需用户设置需用户设置

常见问题及解决方案

1. 背景色不打印

默认情况下，大多数浏览器不打印背景色和背景图像，需要：

  1. 使用 -webkit-print-color-adjust 和 color-adjust 属性：
@media print {
  .colored-element {
    background-color: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}
  1. 提示用户在打印对话框中启用"打印背景"选项。

2. 页眉页脚支持有限

CSS 页眉页脚（@top-center 等）支持有限，替代方案：

@media print {
  /* 在每页顶部添加页眉 */
  body::before {
    content: "公司报告";
    display: block;
    text-align: center;
    margin-bottom: 2cm;
  }
  
  /* 在每页底部添加页脚 */
  body::after {
    content: "© 2023 公司名称";
    display: block;
    text-align: center;
    margin-top: 2cm;
  }
}

3. 分页问题

不同浏览器对分页控制的支持不一致：

@media print {
  /* 使用多种属性增加兼容性 */
  .no-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .page-break {
    page-break-before: always;
    break-before: page;
  }
}

最佳实践

1. 始终提供打印样式

即使是简单的网站，也应该提供基本的打印样式：

@media print {
  /* 基本打印优化 */
  body {
    font-family: serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  /* 隐藏非必要元素 */
  nav, aside, footer, .ads, .comments, .social-buttons, button {
    display: none;
  }
  
  /* 优化链接 */
  a {
    color: #000;
    text-decoration: underline;
  }
}

2. 测试打印样式

定期测试打印样式，确保良好的打印体验：

  1. 使用浏览器的打印预览功能
  2. 测试不同的纸张尺寸（A4、Letter 等）
  3. 测试不同的浏览器
  4. 实际打印测试

3. 考虑墨水和纸张使用

优化打印样式以节省资源：

@media print {
  /* 使用较浅的颜色 */
  body {
    color: #333;
  }
  
  /* 减小图片尺寸 */
  img {
    max-height: 5cm;
  }
  
  /* 减小边距 */
  @page {
    margin: 1.5cm;
  }
  
  /* 使用较小的字体 */
  p, li {
    font-size: 10pt;
  }
}

4. 提供打印选项

让用户控制打印内容：

<div class="print-controls">
  <h3>打印选项</h3>
  <label><input type="checkbox" class="print-option" data-target=".images" checked> 打印图片</label>
  <label><input type="checkbox" class="print-option" data-target=".code-blocks"> 打印代码块</label>
  <label><input type="checkbox" class="print-option" data-target=".comments"> 打印评论</label>
  <button onclick="window.print()">打印</button>
</div>

<script>
  document.querySelectorAll('.print-option').forEach(option => {
    option.addEventListener('change', function() {
      const targetSelector = this.getAttribute('data-target');
      const elements = document.querySelectorAll(targetSelector);
      
      elements.forEach(el => {
        el.classList.toggle('no-print', !this.checked);
      });
    });
    
    // 初始化
    if (!option.checked) {
      const targetSelector = option.getAttribute('data-target');
      document.querySelectorAll(targetSelector).forEach(el => {
        el.classList.add('no-print');
      });
    }
  });
</script>

<style>
  @media print {
    .print-controls {
      display: none;
    }
    
    .no-print {
      display: none !important;
    }
  }
</style>

5. 使用现代 CSS 特性

利用现代 CSS 特性改进打印样式：

@media print {
  /* 使用 CSS 变量 */
  :root {
    --print-font-size: 12pt;
    --print-line-height: 1.5;
    --print-margin: 2cm;
  }
  
  body {
    font-size: var(--print-font-size);
    line-height: var(--print-line-height);
  }
  
  /* 使用 CSS Grid 进行打印布局 */
  .print-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1cm;
  }
  
  /* 使用 clamp() 确保适当的大小 */
  h1 {
    font-size: clamp(16pt, 5vw, 24pt);
  }
}

参考资源

总结

CSS 打印样式是响应式设计的重要组成部分，它确保网页内容在打印时保持良好的可读性和美观性。通过合理设置打印样式，可以：

  1. 优化用户体验：为需要打印网页内容的用户提供更好的体验
  2. 节省资源：通过隐藏不必要的元素和优化布局，减少墨水和纸张的使用
  3. 保持品牌一致性：确保打印输出与品牌形象保持一致
  4. 提高可读性：调整字体、行高和颜色，使打印内容易于阅读

尽管数字媒体日益普及，打印仍然是信息传递的重要方式。通过实施本文介绍的技术和最佳实践，您可以确保网站在各种媒介上都能提供出色的用户体验。