Mahoo Blog

在构建网站的过程中，我们通常会将焦点放在「屏幕端」的视觉体验上，确保用户在浏览器中看到的是美观、响应式且交互良好的界面。但你是否也注意到，当用户点击「打印」或选择「保存为 PDF」时，网页往往不尽如人意：排版错乱、背景杂色、按钮导航满天飞……

这不仅影响体验，更会破坏内容的专业感，尤其是在内容导出（如文章、简历、报告）场景中。

那么，如何构建一个在「屏幕端」和「打印端」都能优雅展现的网站呢？最近我正好在重拾我的简历，已经是职业生涯的 V3 版本了，准备开发一个个人简历展示站点，且不仅可以在网页端清晰展示，还能一键保存为 PDF，用于面试或资料投递。

在这个过程中，我深入研究了网页的打印优化策略，发现这是一个实用但经常被忽略的前端细节。因此，本篇文章就带你和我一起，从实际出发，系统掌握网页打印样式的核心知识与实现方法，让我们的网站不仅好看，更“好打”！

打印样式为何重要？

打印优化不是加分项，而是内容型网站的必要选择！

CSS 中的 @media print 媒体查询是打印优化的起点。它允许你在打印设备（或保存为 PDF）使用一套独立样式，不影响屏幕端展示。

@media print {
  body {
    background-color: white;
    color: black;
  }

  nav, footer, .no-print {
    display: none;
  }
}

典型的使用场景有：

CSS 的 @page 规则允许你控制打印页面的规格，包括纸张大小、页边距，甚至页码位置：

@page {
  size: A4 portrait;
  margin: 2cm;
}

这对于输出正式文档（如简历、合同、分析报告）非常有用，让页面在打印设备上有更一致的版式。

打印时，如果没有分页控制，打印输出可能在内容中间断开，比如将一个表格拆成两页，极大影响阅读。通过这些 CSS 属性，可以强制分页或避免分页：

h2 {
  page-break-before: always; /* 新章节从新页开始 */
}

table {
  page-break-inside: avoid;  /* 避免表格中间分页 */
}

在打印内容中，超链接无法点击，失去作用。此时可以使用伪元素显示链接地址：

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 12px;
    color: gray;
  }
}

这样用户在阅读纸质内容时，也能看到网址来源。

现代布局（如 Flex 和 Grid）在浏览器中表现优雅，但在打印环境中兼容性有限，尤其是跨页时容易排版错乱。

解决方式是：打印时降级为简单布局，如 block 或 table。

@media print {
  .flex-layout {
    display: block !important;
  }
}

打印时不追求动态布局，而是内容整齐有序。

虽然浏览器内置“打印”功能，但你仍可通过 JavaScript 提供一键入口：

<button onclick="window.print()">打印此页</button>

还可以通过事件监听自定义打印前的准备逻辑：

window.addEventListener('beforeprint', () => {
  console.log("正在准备打印内容...");
});

通过 JavaScript 强制切换为打印模式：

window.matchMedia('print').matches  // 判断是否处于打印环境

或监听打印前后的事件：

window.addEventListener('beforeprint', () => {
  console.log('即将打印');
});

window.addEventListener('afterprint', () => {
  console.log('打印完成');
});

这对于在打印前动态处理页面内容（如临时隐藏某些区域）非常有用。