phantomjs不正确的pdf渲染

Question

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

当我渲染html时，我的工作正常，但当我尝试用node-html-pdf创建一个pdf时，它没有。

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

pdf中的奇怪之处是前2页正确呈现。
然后每页后面的大小是前一页的200％：

我确信这是css的一个问题。 我也想制作css规则，这些规则将适用于每个纸张大小（字母，小报，A4，......）或方向（纵向，横向），并将图像置于PDF格式的页面中心。

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

Answer 1

在我的机器中构建了环境的副本，并找出添加此代码修复了问题：

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

起初我以为是

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

技巧，但事实并非如此。正文和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，但这是一个开始。祝你好运。