phantomjs不正確的pdf呈現

我想從一個html頁面生成pdf。 html非常簡單，併爲每個頁面呈現一個居中圖像。phantomjs不正確的pdf呈現

css我已經正常工作時，我呈現的HTML但它不會當我試圖創建一個PDF與它node-html-pdf。

我還創建GitHub上一個小快遞應用程序，它再現了問題： https://github.com/aschmid/phantomjs2pdf

什麼是在PDF怪異的是，第2頁正確渲染。
再經過每一個頁面是200％，前一個的大小：

我相信這是與CSS的問題。我也想創建適用於每個紙張尺寸（letter，tabloid，A4，....）或方向（縱向，橫向）的css規則，並將圖像置於pdf中的頁面中央。

有人能指點我正確的方向嗎？

來源

2016-01-12 aschmid00

內置環境的一個副本在我的機器，並計算出添加此代碼解決了該問題：

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

起初我還以爲是

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

招但那一點都不「T。我的max-height正文和HTML標籤確保沒有任何東西通過您的網頁。

而且，雖然它不是要問兩個不同的東西，有一個問題很合適，這裏的一些代碼來設置你掉蹤使這項工作對風景和肖像模式上：

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

這將找到您的視口的位置，並將圖像置於縱向模式。奇怪的translate值是由於與rotate的奇怪交互。也許這不是與html-pdf一起工作，但它是一個開始。祝你好運。

來源

2016-01-19 22:07:43

感謝您的回答！生病在接下來的幾天檢查出來，讓你知道。 – aschmid00

不客氣。 –

只是測試它，它完美的作品。不確定爲什麼你添加了最後一個'@ media'片段，因爲上述方法在任一方向都可以正常工作。 – aschmid00

phantomjs不正確的pdf呈現

回答

相關問題