将HTML转换/打印为PDF时，每页内容都有页边距，但没有背景 [英] Have margins for content but not background on every page when converting/printing HTML to PDF

问题描述

我在一个网站上工作，该网站需要将网页内容导出为pdf，但它必须遵守以下条件：

• 每页都必须完整打印背景
• 内容不得与背景重叠

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

遗憾的是，mPDF不能与这个新网站一起使用，很可能是因为它使用了引导和flex布局(它返回给我的pdf包含大约1000个页面，大部分是空白的，其他页面是非常放大的页面)，在向用户呈现内容之前，javascript会更改该部分内容，mPDF没有考虑到这一点(我注意到那是在我删除bootstrap.css时，它允许我查看转换结果)。

所以我改用Pupeteerhttps://github.com/puppeteer/puppeteer，它可以在引擎盖下使用铬很好地打印内容，但是我有一些问题。 第一个问题是我不能在每一页上打印完整的背景，但是我在编写这个问题时解决了这个问题，我用position: fixed和width和height在100%创建了一个div作为背景

第二个问题是，当我在Pupeteer中设置页边距(最终与用铬打印页边距相同)时，它们也会影响背景(这甚至在创建固定div之前就是一个问题)，因此我无法找到使文本不与背景重叠的方法

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

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

推荐答案

因此，显然不可能完全按照我在此问题中的要求进行操作，所以我找到了替代解决方案。
我剪切了背景的顶部和底部，并将它们用作木偶操纵者页眉和页脚内的图像。花了一段时间才使图像与充当背景的position: fixeddiv(现在只包含背景的侧面)一致，但在正文上设置固定宽度就完成了这项工作

这篇关于将HTML转换/打印为PDF时，每页内容都有页边距，但没有背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！