当 converting/printing HTML 为 PDF 时，每一页的内容都有边距但没有背景
Have margins for content but not background on every page when converting/printing HTML to PDF
我在一个需要将网页内容导出为 pdf 的网站上工作，但它必须遵守以下条件：
- 每一页的背景必须完全打印
- 内容不得与背景重叠
由于该网站使用 PHP 我尝试使用我之前在具有相同条件的另一个 PHP 网站上使用的 mPDF。 mPDF 在 pdf 文件的每一页上显示完整背景，即使页面没有完全填满内容，我可以设置影响内容的边距，但不影响仍然覆盖整个页面的背景。
遗憾的是，mPDF 不能与这个新网站一起使用，很可能是因为它使用了 bootstrap 和 flex 布局（它返回给我大约一千页的 pdf，大部分是空白的，其他的非常放大）页面的），最重要的是，那部分内容在呈现给用户之前被 javascript 更改了，而 mPDF 没有考虑到这一点（我注意到那是我删除 bootstrap.css 的时候让我看到转换的结果）。
所以我切换到 puppeteer https://github.com/puppeteer/puppeteer，它在后台使用 chrome 可以很好地打印内容，但我遇到了一些问题。
第一个问题是我无法在每一页上打印完整的背景，但我在写这个问题时解决了这个问题，方法是创建一个 div with position: fixed and width and height 在 100% 作为背景
第二个问题是，当我在 puppeteer 中设置边距时（最终与 chrome 中的打印边距相同）它们也会影响背景（这甚至在创建 fixed 之前就是一个问题div) 所以我找不到让文字不与背景重叠的方法
在这里你可以看到一个例子：https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html
如果您在另一个选项卡中打开预览并尝试打印它，您就会看到我遇到的问题
所以，显然不可能完全按照我在这个问题中提出的要求进行操作，所以我找到了替代解决方案。
我剪切了背景的顶部和底部，并将它们用作 puppeteer 的页眉和页脚中的图像。花了一段时间才使图像与充当背景的 position: fixed div 重合（现在只包含背景的边），但在 body 上设置固定宽度完成了工作
我在一个需要将网页内容导出为 pdf 的网站上工作，但它必须遵守以下条件：
- 每一页的背景必须完全打印
- 内容不得与背景重叠
由于该网站使用 PHP 我尝试使用我之前在具有相同条件的另一个 PHP 网站上使用的 mPDF。 mPDF 在 pdf 文件的每一页上显示完整背景，即使页面没有完全填满内容，我可以设置影响内容的边距，但不影响仍然覆盖整个页面的背景。
遗憾的是，mPDF 不能与这个新网站一起使用，很可能是因为它使用了 bootstrap 和 flex 布局（它返回给我大约一千页的 pdf，大部分是空白的，其他的非常放大）页面的），最重要的是，那部分内容在呈现给用户之前被 javascript 更改了，而 mPDF 没有考虑到这一点（我注意到那是我删除 bootstrap.css 的时候让我看到转换的结果）。
所以我切换到 puppeteer https://github.com/puppeteer/puppeteer，它在后台使用 chrome 可以很好地打印内容，但我遇到了一些问题。
第一个问题是我无法在每一页上打印完整的背景，但我在写这个问题时解决了这个问题，方法是创建一个 div with position: fixed and width and height 在 100% 作为背景
第二个问题是，当我在 puppeteer 中设置边距时（最终与 chrome 中的打印边距相同）它们也会影响背景（这甚至在创建 fixed 之前就是一个问题div) 所以我找不到让文字不与背景重叠的方法
在这里你可以看到一个例子：https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html
如果您在另一个选项卡中打开预览并尝试打印它，您就会看到我遇到的问题
所以，显然不可能完全按照我在这个问题中提出的要求进行操作，所以我找到了替代解决方案。
我剪切了背景的顶部和底部，并将它们用作 puppeteer 的页眉和页脚中的图像。花了一段时间才使图像与充当背景的 position: fixed div 重合（现在只包含背景的边），但在 body 上设置固定宽度完成了工作