Reputation: 7158
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:
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
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.
Upvotes: 2