将 HTML 转换/打印为 PDF 时，每个页面都有内容边距，但没有背景答案

【问题标题】：Have margins for content but not background on every page when converting/printing HTML to PDF将 HTML 转换/打印为 PDF 时，每个页面都有内容边距，但没有背景
【发布时间】：2021-11-23 10:09:26
【问题描述】：

我正在开发一个需要将网页内容导出为 pdf 的网站，但它必须遵守以下条件：

背景必须完全打印在每一页上
内容不得与背景重叠

由于该网站使用 PHP，我尝试使用我之前在另一个具有相同条件的 PHP 网站上使用的 mPDF。即使页面没有完全填满内容，mPDF 也会在 pdf 文件的每一页上显示完整的背景，我可以设置影响内容的边距，但不能设置仍然覆盖整个页面的背景。

遗憾的是，mPDF 不适用于这个新网站，很可能是因为它使用 bootstrap 和 flex 布局（它返回给我的 pdf 大约有一千页，大部分是空白的，其他页面的部分非常放大），在在将内容呈现给用户之前，该部分内容的顶部已由 javascript 更改，而 mPDF 没有考虑到这一点（我注意到那是当我删除 bootstrap.css 时，它允许我查看转换结果）。

所以我切换到 puppeteer https://github.com/puppeteer/puppeteer，它在引擎盖下使用 chrome 打印内容就好了，但我遇到了一些问题。第一个问题是我无法在每一页上打印完整的背景，但我在写这个问题时解决了这个问题，方法是在100% 创建一个带有position: fixed 和width 和height 的div，用作背景

第二个问题是，当我在 puppeteer 中设置边距（最终与在 chrome 中打印边距相同）时，它们也会影响背景（这甚至在创建固定 div 之前就是一个问题）所以我可以找不到让文本不与背景重叠的方法

这里你可以看到一个例子：https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html

如果您在另一个选项卡中打开预览并尝试打印它，您会看到我面临的问题

【问题讨论】：

标签： google-chrome printing puppeteer

【解决方案1】：

所以，显然不可能按照我在这个问题中的确切要求去做，所以我找到了一个替代解决方案。
我剪切了背景的顶部和底部，并将它们用作 puppeteer 的页眉和页脚中的图像。花了一些时间使图像与充当背景的 position: fixed div 一致（现在只包含背景的侧面），但在 body 上设置了固定宽度就可以了

【讨论】：