Rank: Newbie Groups: Member
Joined: 2/13/2020 Posts: 1
|
When transforming a html to pdf, and the first row has a big TD, the first page contains blank table (table headers only) and the page header, and starts it's rows only on 2nd page, even there is not more space on the 2nd page than there is on first page.
Code: C#
var baseOptions = new HtmlToPdfOptions();
baseOptions.RepeatTableHeaderAndFooter = true;
baseOptions.NoScript = true;
baseOptions.BaseUrl = "http://localhost/mysite/printing";
baseOptions.AutoFitX = HtmlToPdfAutoFitMode.None;
baseOptions.AutoFitY = HtmlToPdfAutoFitMode.None;
baseOptions.ZoomLevel = 1f;
baseOptions.AutoAdjustForDPI = false;
baseOptions.JpegQualityLevel = 100;
var htmlHeader = "\r\n<head>\r\n <link href=\"/mysite/content/css/printing/salesdocument_theme1.css\" rel=\"stylesheet\" type=\"text/css\" />\r\n</head>\r\n\r\n<div class=\"header\">\r\n <div class=\"header-first-column left-align\">\r\n <div class=\"logotype\">\r\n <span class=\"large bold\">upline</span>\r\n </div>\r\n\r\n <div class=\"info\">\r\n\r\n <span class=\"key\">leftline1</span>\r\n <span class=\"value\">val1</span>\r\n\r\n <span class=\"key\">leftline2</span>\r\n <span class=\"value\">val2</span>\r\n\r\n\r\n\r\n\r\n <span class=\"key\">leftline3</span>\r\n <span class=\"value\">val3</span>\r\n\r\n\r\n\r\n\r\n\r\n <span class=\"key\">leftline4</span>\r\n <span class=\"value\">val4</span>\r\n\r\n\r\n\r\n <span class=\"key\">leftline5</span>\r\n <span class=\"value\">123 567890123 56789 1234567890123 567890123 45678 012345 78901234567</span>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"header-second-column left-align\">\r\n <div class=\"title\">\r\n <span class=\"large bold\">Upper right title</span>\r\n </div>\r\n\r\n <div class=\"invoice-address \">\r\n <span>Upper right rectangle line1</span>\r\n <span></span>\r\n <span></span>\r\n <span>Upper right rectangle line2</span>\r\n </div>\r\n\r\n <div class=\"delivery-address\">\r\n </div>\r\n\r\n </div>\r\n</div>";
var headerResult = HtmlToPdf.ConvertHtml(htmlHeader, document, baseOptions);
headerHeight = headerResult.LastPosition;
document.Pages.Clear();
baseOptions.PageSize = new SizeF(PdfPageSizes.A4.Width, PdfPageSizes.A4.Height);
baseOptions.OutputArea = new RectangleF(
0.5/*marginX*/,
0.5/*marginY*/ + 2.79166675/*headerHeight*/,
baseOptions.PageSize.Width - 1 * 0.5/*marginX*/,
baseOptions.PageSize.Height - (0.5/*marginY*/ + 0.5/*marginY*/ + 1.4/*FooterHeight*/ + 2.79166675/*headerHeight*/));
baseOptions.HeaderHtmlPosition = 0.5/*marginY*/;
baseOptions.HeaderHtmlFormat = htmlHeader;
var htmlMain = "\r\n<head>\r\n <link href=\"/mysite/content/css/printing/salesdocument_theme1.css\" rel=\"stylesheet\" type=\"text/css\" />\r\n</head>\r\n\r\n<div class=\"body\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th class=\"width15\">Col0</th>\r\n\r\n <th>Col1 main</th>\r\n\r\n\r\n <th class=\"right width10\">Col2</th>\r\n\r\n\r\n <th class=\"width10\">Col3</th>\r\n\r\n <th class=\"right width10\">Col4</th>\r\n <th class=\"right width15\">Col5</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n <tr>\r\n <td colspan=\"6\">\r\n \r\n 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41\r\n \r\n </td>\r\n </tr>\r\n <tr class=\"normal-row\">\r\n\r\n\r\n \r\n \r\n <td class=\"\">\r\n 1\r\n </td>\r\n\r\n <td>\r\n book\r\n </td>\r\n\r\n\r\n <td class=\"right\">\r\n 1,00\r\n </td>\r\n\r\n\r\n <td>\r\n st\r\n </td>\r\n\r\n <td class=\"right\">\r\n 1,00\r\n </td>\r\n <td class=\"right\"> 1,00 </td>\r\n </tr>\r\n\r\n\r\n\r\n\r\n\r\n </tbody>\r\n\r\n <tfoot>\r\n <tr>\r\n <td> </td>\r\n </tr>\r\n </tfoot>\r\n\r\n </table>\r\n\r\n\r\n</div>\r\n";
var document = new PdfDocument();
var result = HtmlToPdf.ConvertHtml(htmlMain, document, baseOptions);
salesdocument_theme1.css
Code: CSS
@import url('salesdocument_common.css');
.body table {
width: 100%;
padding: 0px;
border-collapse: separate;
border-spacing: 0px;
}
.body table thead th {
padding: 8px;
}
.body table td {
padding-left: 8px;
padding-right: 8px;
}
.header-second-column .invoice-address {
border: 1px solid black;
}
salesdocument_common.css
Code: CSS
.header {
position: relative;
float: left;
padding-bottom: 8px;
width: 100%;
overflow: hidden;
}
.header-first-column {
width: 52%;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header-first-column .logotype {
height: 164px;
width: 100%;
overflow: hidden;
}
.header-first-column .info {
width: 100%;
float: left;
}
.header-first-column .info .key {
display: inline-block;
vertical-align: top;
font-weight: bold;
width: 30%;
}
.header-first-column .info .value {
display: inline-block;
text-align: left;
width: 68%;
}
.header-second-column {
width: 48%;
margin: 0px;
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header-second-column .invoice-address {
width: 100%;
position: relative;
margin-top: 42px;
padding: 10px;
}
.header-second-column .delivery-address {
width: 100%;
position: relative;
margin-top: 44px;
padding-left: 10px;
}
.title {
padding-left: 10px;
}
.title .key {
display: inline-block;
font-weight: bold;
width: 40%;
}
.title .value {
display: inline-block;
text-align: left;
width: 50%;
}
.body {
width: 100%;
float: left;
position: relative;
display: table;
}
.body table {
width: 100%;
padding: 0px;
border-collapse: separate;
border-spacing: 0px;
}
.body table thead {
padding: 0px;
margin: 0px;
}
.body table thead th {
page-break-inside: avoid;
border-bottom: 1px solid black;
padding: 4px 4px 0px 0px;
margin: 0px;
height: 20px;
}
.body table tr {
page-break-inside: avoid;
}
.body table td {
padding: 4px 4px 0px 0px;
margin: 0px;
}
.left-align {
float: left;
}
.large {
font-size: 13pt;
}
.bold {
font-weight: bold;
}
.right {
text-align: right;
}
.width10 {
width: 10%;
}
.width15 {
width: 15%;
}
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,218
|
Hi,
Please try to remove the page-break-inside: avoid in your CSS. You have everything in a single row and then have page-break-inside:avoid on that row. This creates a single large "unbreakable" section that caused the anomaly of your output. When you have a large section that can't fit in a page, the converter will always skip to the next page first. It won't evaluate whether the next page is the same or fit better. So the best way to fix such issue is not to form such large unbreakable section unnecessarily.
Thanks!
|