NReco.PdfGenerator Incorrect pdf generation
Question
I have a page in html which looks :
Next I'm using NReco.PdfGenerator library to generate html->pdf The result of the above page:
My html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.main-body {
width:674px;
}
.bottom-border {
border-bottom: 1px solid black;
}
.left-column{
width:50%;
float:left;
}
.left-column-small{
display: inline-block;
float:left;
margin-right:11px;
}
.right-column-big{
display: inline-block;
text-align:left !important;
}
.right-column{
width:50%;
float:right;
}
.text-right{
text-align:right;
}
.display-flex {
display:flex;
}
.flex {
flex:1;
}
.remove-margin {
-webkit-margin-after: 0em;
}
.border-right {
border-right: 1px solid black;
}
.border-top {
border-top: 1px solid black;
}
.margin-left {
margin-left:17px;
}
.align-left{
text-align:left;
}
</style>
</head>
<body>
<div class="main-body">
<div class="bottom-border">
<p>Centrum medyczne</p>
<p><br/></p>
</div>
<div class="display-flex">
<div class="left-column flex">
<span>Imie nazwisko</span>
<br/><br/><br/>
<p class="remove-margin">OL</p>
</div>
<div class="right-column text-right flex">
test<br/>
test2<br/>
test3
<p class="remove-margin">OL</p>
</div>
</div>
<div class="display-flex">
<div class="left-column flex border-right">
<span>oko prawe</span><br/>
<span>Fakijne</span><br/><br/>
<span>data<span><br/>
<div class="left-column-small flex ">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
<div class="right-column-big text-right flex">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
</div>
<div class="right-column flex">
<div class="text-right flex">
<span>oko lewe</span><br/>
<span>Fakijne</span><br/><br/>
</div>
<div class="margin-left">
<div >data</div>
<div class="left-column-small flex ">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
<div class="right-column-big flex">
<div class="border-top">
<table>
<tr>
<td></td>
<td>Jill</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>fgfgfg</td>
<td>2</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As you can see above, it differs from the pattern I tried to change the code but to no avail. I also changed zoom but it didn't help. I don't know where this empty space is from. Thank you for your help
1 answers
solution1
0 2017-12-11 06:54:09
This happens because of
.main-body {
width:674px;
}
by default wkhtmltopdf (which is internally used by NReco.PdfGenerator) uses 'smart shrinking' and tries to determine web page width automatically, but no less than ~800px (for default 96dpi). So you have to increase width of your page or use width:100%.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.