Click here to Skip to main content
15,040,743 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
my html like
<div class="d-flex">
<div class="left-part bgcolor-blue">...</div>
<div class="right-part bgcolor-white">...</div>
</div>

i have use wkhtmltopdf library

i want to convert html into pdf,
but my html not fit to all pdf page,
last page remain half empty,
so,left part which is blue is stop on half page of pdf where html finish into pdf.
but i want to extent till pdf page not end.
means give left part to unlimited height.

What I have tried:

i have give

padding-bottom:1346px

to the right part so that html extent exactly one page of pdf as black page.
it will extent my left part also.
so when we print pdf remaining empty page not be printed,

but this is not proper solution.
so what i have to do?
Posted
Updated 30-May-18 3:31am
v2

1 solution

The problem is that PDF uses fixed page sizes while HTML is a floating format rendering the content according to the size of the output window.

You have not specified which method you are using to generate the PDF. But such generation is usually a kind of printing. So you can use media specific CSS styles:
HTML
<html>
<!-- Usual headers -->
<link rel="stylesheet" type="text/css" media="all" href="css/general.css">
<link rel="stylesheet" type="text/css" media="screen, projection, tv" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
<!-- ... -->
You can now define your styles for the left and right part in the screen and print files with different settings.

I have not tested it (and it may depend on the other content of your page), but you can try to set the height of the left and right parts to 100% for printing. Note that this requires setting the height of the html and body sections to 100% too:
CSS
/* print.css */
html, body {
    height: 100%;
}
div.left-part {
    background-color: blue;
    height: 100%;
}
div.right-part {
    background-color: white;
    height: 100%;
}
If this does not work try other settings. Overall using media specific styles makes it much easier to format the output for one media type without affecting others.

But note that the above also when a user is printing your page and would then get a blue background printed what is usually not wanted. Therefore, the above method is often used when having some kind of background to disable that when printing.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900