HTML/CSS 转 PDF：我如何解决“Page Break”噩梦

Source: Dev.to

问题

我们都有过这种经历。你在 HTML/CSS 中构建了一个漂亮的布局，按下 Ctrl + P，结果一切都乱了。图片被截成两半，边距消失，背景颜色不见了。

我最近花了几周时间打造一个简历生成器，并且拒绝使用基于 canvas 的方案。我想要的是纯粹、语义化的 HTML，能够完美打印成 PDF。

挑战：CSS 打印媒体

最大的难点是动态处理分页。为此我必须深入研究 CSS 打印规则，例如 break-inside: avoid 和 @page 的边距设置。

解决方案

/* The magic snippet */
.resume-section {
  page-break-inside: avoid;
  break-inside: avoid;
}

@media print {
  @page {
    margin: 0;
    size: auto;
  }
}

结果

经过大量使用 Puppeteer 和 CSS 的调试后，我终于让它可靠地工作了。

如果你在从网页生成 PDF 时遇到困难，或者只是想看看这些 CSS 规则在真实生产应用中的表现，我创建了一个名为 Resumemind 的免费工具来演示。

你可以在这里测试 PDF 生成：

如果对打印 CSS 有任何疑问，欢迎告诉我！