使用 Puppeteer 导出 PDF（二）

上一篇文章中我们使用 Puppeteer 搭建了一个 PDF 导出服务，支持将指定 URL 的网页导出到 PDF 文件。在制作导出网页的过程中碰到了一些问题，在此记录分享一下。

强制分页

在网页中我们可以使用 page-break-after 在指定元素后面强制分页。具体文档参照 MDN page-break-after。

.break-page {
  @media print {
    page-break-after: always;
  }
}

同样我们可以使用 page-break-before 在指定元素前面强制分页。具体文档参照 MDN page-break-before。

.break-page {
  @media print {
    page-break-before: always;
  }
}

两页中间的图片被切割问题

在容器使用了 flex 布局的情况下，容器内的图片在换页的时候会被切割。要避免这个问题，只需要避免使用 flex 布局即可。

下面是没有使用 flex 布局的正常情况：