phantomjs不正确的pdf渲染

Question

我正在尝试从 html 页面生成 pdf。 html 非常简单，为每个页面呈现一个居中的图像。

当我渲染 html 时，我拥有的 css 可以正常工作，但当我尝试使用 node-html-pdf 从中创建 pdf 时却无法正常工作。

我还在 github 上创建了一个小型 express 应用程序，它重现了该问题： https://github.com/aschmid/phantomjs2pdf

pdf 中的奇怪之处在于前 2 页正确呈现。
然后之后的每一页都是前一页的 200%：

我确定这是 css 的问题。 我还想创建适用于每种纸张大小（字母、小报、A4 ......）或方向（纵向、横向）的 css 规则，并将图像在 pdf 页面上居中。

有人能指出正确的方向吗？

Answer 1

在我的机器上构建您的环境的副本并发现添加此代码可以解决问题：

html, body {
    max-height:100%;
}

一开始我以为是

top: 50%;
left: 50%;-webkit-transform: translateX(-50%) 
translateY(-50%);

诡计，但事实并非如此。我在 body 和 html 上的 max-height 标记确保没有任何内容超出您的页面。

此外，虽然在一个问题中提出两个不同的问题并不正确，但这里有一些代码可以让您开始在横向和纵向模式下进行这项工作：

@media screen and (orientation:portrait) { 
        .page .imgWrapper img {
            -ms-transform: rotate(90deg);
            -webkit-transform: rotate(90deg) translateX(-29%) translateY(87%);
         } }

这将找到您的视口位置并将图像居中以用于纵向模式。奇怪的translate 值是由于与rotate 的奇怪交互。也许这不是为了与html-pdf 一起工作而实现的，但这是一个开始。祝你好运。