[!info] related notes

• CSS 打印媒体查询
• Tailwind 工程化 MOC
• 状态与媒体变体

使用 Tailwind CSS 与原生 CSS 打印网页及导出 PDF

简历、报告和发票可以复用页面 DOM，通过 window.print() 打开浏览器打印对话框，由用户选择打印机或“另存为 PDF”。它不直接返回 PDF 文件，也不保证不同浏览器、字体和打印设置下像素一致。

纸张与打印专用样式

@page 描述页面盒的尺寸和边距。下面沿用 A4 纵向、上下 8mm、左右 15mm 的示例值；它们不是所有文档的最佳边距，实际输出还受纸张、缩放及打印机可打印区域影响。

Tailwind 的 print: 变体用于打印媒体。仅给屏幕控制区加隐藏标记，保留文档自身的标题、页脚、签名等内容：

<button type="button" class="print:hidden" onclick="window.print()">打印 / 保存 PDF</button>
<main id="resume-wrapper" class="mx-auto max-w-3xl p-6 print:max-w-none print:p-0">
  <h1>简历</h1>
  <section class="keep-together">一段适合放在同页的短内容</section>
</main>

框架项目应使用自身事件绑定方式。不要全局隐藏所有 header / footer / aside，这些元素也可能承载要打印的事实。

原生 CSS 示例

放入应用全局样式，并按实际文档选择作用范围：

@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 15mm;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: white;
    color: black;
  }

  .no-print {
    display: none !important;
  }

  #resume-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  .preserve-print-color {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .keep-together {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }
}

• 颜色：print-color-adjust: exact 表达保留颜色的意图，不能覆盖用户的背景打印选择。添加 !important 也不能强制浏览器忽略用户设置；图表不要只靠背景色传递信息。
• 分页：avoid 请求尽量避开断点，不保证长于一页的元素完整留在同页。把它限制在较短的逻辑块上；给所有段落、列表或整张长表设置避断可能留下大量空白。
• 布局：打印页宽也可能命中普通宽度断点。需要时用明确的打印规则覆盖列数、宽度、溢出和高度限制；px / pt / mm 都可用于打印设计，没有必须放弃所有相对单位的规则。
• 链接：根据文档用途保留可识别的链接样式，或在纸质版补充 URL；全局清除链接样式会降低可读性。

验收

在目标浏览器的打印预览与实际 PDF 中检查：

• 页数、纸张与缩放符合需求；长段落、表格、图片不丢失。
• 字体和图片已加载；最后一页及分页交界处没有裁切或内容覆盖。
• 若文档不需要浏览器自动附加的网址、日期或页码，在打印设置中关闭“页眉和页脚”；它们与页面 DOM 的 header / footer 不同。
• 需要保留背景时检查“背景图形”选项，并验证关闭背景后信息仍可读。

打印媒体模拟便于调试 CSS，但不能替代实际分页预览；保存 PDF 与实体打印也应分别检查。

参考

• MDN：Printing
• MDN：print-color-adjust
• MDN：break-inside