TLDR;我需要能够在浏览器中显示打印CSS，而无需使用开发工具。
这有点奇怪，但我正在抓住稻草。
不试图解释整个系统 - 我有一个基于Web的文本编辑机制，然后放入模板，然后通过HTML2PDF操作以PDF格式呈现。我在每个页面上都有静态页眉/页脚等要求，但页面之间的文本流动等等。
我需要能够让用户看到一个实时（或接近实时）的预览，了解他们的输出在PDF格式下的外观，但我不想在每次更改时继续重新呈现PDF。我真的希望能够向他们展示使用打印CSS的“打印预览”，但是在我的主浏览器窗口或iframe中，而不是通过通常的打印预览，而不是使用chrome / firefox中的网络工具。 / p>
有没有告诉浏览器使用打印CSS进行渲染？或者是否有一个我无法找到的JS库可以模拟它？
答案 0 :(得分：2)
我在Stack Overflow工作中为您的Careers Profile功能构建了类似于您所描述的内容。这比将一些CSS应用于某些HTML要困难得多。
我假设这个pdf可能是多个页面，你想要显示各个页面，比如基本上每个打印预览的打印预览功能。
无论您使用什么HTML2PDF转换器都会定义页面高度和宽度（以像素为单位）（尽管您可能需要尝试弄清楚它是什么），通常您也可以找到以像素为单位的页面填充。使用这个你可以在你的html中创建一个单独的页面包装器，其中有一些css可以匹配填充并创建一个漂亮的页面边框，无论你喜欢什么。
<div class="pdf-page"></div>
将pdf中所需的html的所有内容转储到那里。
现在您需要做的是弄清楚PDF的实际内容有多大（以像素为单位）。最简单的方法是将它实际放入浏览器的容器中，然后使用一些javascript来计算容器的高度。可以在屏幕上实际显示它，但请记住，您的计算值基于当前浏览器的图形引擎，不一定是HTML2PDF转换器使用的图形引擎，因此结果可能会有所不同。如果遇到一致的问题，您可以通过在浏览器中为每页计算添加一点填充来解决它们，但这超出了这个范围。
一旦你有一个页面和整个文档的高度，你就可以计算出你需要多少页面，然后从上面复制整个pdf-page，将所有html内容多次复制到预览中页。然后为每个页面设置一个负边距以向上滚动内容。在第一页上是-0，在第二页上是-1 * pageHeightInPixels，第三页是-2 * pageHeightInPixels，依此类推。如果你的文件很短，那么效果很好，如果它们太长，这可能会失败。
现在你可以根据自己的喜好设计它。
当我这样做时，就像7年前一样，没有找到任何更新的方法来完成它，但我们已经改变了我们如何做pdf预览以实际生成真正的pdf。