为打印添加特定样式

在Web开发中，我们经常需要为打印页面提供特定的样式，以确保打印输出的内容清晰、易读且布局合理。本文将介绍如何为打印添加特定样式的规范，包括最佳实践和常见错误。

1. 使用打印媒体查询

正确做法

css 复制代码

/* 打印样式表 */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: none;
  }
  
  .no-print {
    display: none;
  }
  
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
}

错误做法

css 复制代码

/* 错误：直接在全局样式中设置打印样式 */
body {
  font-size: 12pt; /* 这会影响到屏幕显示 */
}

/* 错误：使用错误的媒体查询语法 */
@media printer {  /* 应该是 'print' 而不是 'printer' */
  /* 样式 */
}

2. 优化打印布局

正确做法

scss 复制代码

@media print {
  // 移除不必要的元素
  .header, .footer, .sidebar {
    display: none;
  }
  
  // 确保内容宽度适合打印
  .content {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  // 避免分页时截断重要内容
  section {
    page-break-inside: avoid;
  }
  
  // 在适当位置强制分页
  .chapter {
    page-break-before: always;
  }
}

错误做法

css 复制代码

@media print {
  /* 错误：使用固定像素宽度可能导致打印溢出 */
  .content {
    width: 800px;
  }
  
  /* 错误：忽略分页控制 */
  /* 可能导致表格或图片被截断 */
  
  /* 错误：保留不必要的背景和颜色 */
  body {
    background-color: #f5f5f5;
  }
}

3. 处理链接和URL

正确做法

scss 复制代码

@media print {
  // 显示链接URL
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  
  // 内部链接不需要显示完整URL
  a[href^="/"], a[href^="#"] {
    &::after {
      content: "";
    }
  }
}

错误做法

css 复制代码

@media print {
  /* 错误：完全不显示链接URL */
  a {
    text-decoration: none;
    color: inherit;
  }
  
  /* 错误：显示所有链接URL，包括锚链接 */
  a::after {
    content: " (" attr(href) ")";
  }
}

4. 控制分页

正确做法

scss 复制代码

@media print {
  // 避免在标题前分页
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  // 避免在段落中分页
  p {
    page-break-inside: avoid;
  }
  
  // 表格分页时重复表头
  table {
    page-break-inside: auto;
    
    thead {
      display: table-header-group;
    }
    
    tr {
      page-break-inside: avoid;
    }
  }
}

错误做法

css 复制代码

@media print {
  /* 错误：忽略分页控制 */
  /* 可能导致标题单独出现在页面底部 */
  
  /* 错误：强制在所有元素后分页 */
  * {
    page-break-after: always; /* 拼写错误且用法错误 */
  }
  
  /* 错误：表格分页时不重复表头 */
  thead {
    display: none;
  }
}

5. 优化图像和颜色

正确做法

scss 复制代码

@media print {
  // 确保图像适合打印
  img {
    max-width: 100%;
    height: auto;
  }
  
  // 移除背景图像或使用打印友好的替代方案
  .hero-banner {
    background: none !important;
    
    &::after {
      content: url('/path/to/print-friendly-image.jpg');
      display: block;
    }
  }
  
  // 使用高对比度颜色
  .text-muted {
    color: #555 !important;
  }
}

错误做法

css 复制代码

@media print {
  /* 错误：保留低对比度颜色 */
  body {
    color: #999;
  }
  
  /* 错误：保留复杂的背景图像 */
  .header {
    background: linear-gradient(to right, #ff0000, #0000ff);
  }
  
  /* 错误：不控制图像大小 */
  img {
    width: 1000px;
  }
}

6. SCSS中的打印样式组织

正确做法

scss 复制代码

// _print.scss - 单独的打印样式文件

@mixin print-styles {
  @media print {
    @content;
  }
}

// 在组件SCSS中使用
.component {
  // 常规样式...
  
  @include print-styles {
    display: none; // 在打印时隐藏
  }
}

// 或者在主SCSS中导入
@import 'print';

错误做法

scss 复制代码

/* 错误：将打印样式分散在各处而不加组织 */
.component {
  // 常规样式...
}

@media print {
  .component {
    /* 打印样式 */
  }
}

.another-component {
  // 更多常规样式...
}

@media print {
  .another-component {
    /* 更多打印样式 */
  }
}

7. 测试打印样式

正确做法

使用浏览器打印预览功能
使用CSS @media print 模拟工具
实际打印测试关键页面
提供"打印此页"按钮，触发专门的打印优化视图

错误做法

仅依赖屏幕显示判断打印效果
不进行实际打印测试
假设所有打印机表现相同
忽略不同浏览器的打印差异

结论

为打印添加特定样式是Web开发中常被忽视但非常重要的部分。遵循这些规范可以确保：

打印内容清晰易读
节省用户墨水/碳粉
提供更好的阅读体验
确保重要信息完整呈现

通过组织良好的打印样式和充分的测试，可以显著提升用户打印网页内容的体验。