aschmid00
aschmid00

Reputation: 7158

phantomjs incorrect pdf rendering

I am trying to generate a pdf from an html page. the html is very simple and renders a centered image for each page.

the css i have works correctly when i render the html but it does not when I try to create a pdf out of it with node-html-pdf.

I also created a little express app on github which reproduces the problem: https://github.com/aschmid/phantomjs2pdf

what is weird in the pdf is that the first 2 pages render correctly.
Then each page after that is 200% the size of the previous one:

enter image description here

i am sure this is an issue with the css. also i want to create css rules which will apply to each papersize (letter, tabloid, A4, ....) or orientation (portrait, landscape) and center the image on the page in the pdf.

can somebody point me to the right direction?

Upvotes: 3

Views: 1269

Answers (1)

fnune
fnune

Reputation: 5494

Built a replica of your environment in my machine and figured out adding this code fixed the issue:

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

At first I thought it was the

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

trick but it wasn't. My max-height tag on the body and html makes sure nothing goes past your page.

Also, and although it's not really right to ask two different things in one question, here's some code to set you off on the track of making this work for landscape and portrait modes:

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

This will find the position of your viewport and center the image for portrait mode too. The weird translate values are due to strange interactions with rotate. Maybe this is not implemented to work with html-pdf but it's a start. Good luck.

enter image description here

Upvotes: 2

Related Questions