Rank: Newbie Groups: Member
Joined: 3/17/2020 Posts: 4
|
Hi,
My report generates just fine with HTML opened on Google Chrome but when I converted it to PDF and view the report in Landscape, the text is overlapping to the next row. If the text is on right side of the paper, the text will get cut off it is too long. It is not word-wrap like it should.
Please help. Thanks!
Here is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style>
div { position: absolute; color: #000000; vertical-align:bottom; font: 7pt 'Arial'; }
div.wrap { white-space: normal; }
div.alignLeft { text-align: left; }
div.alignRight { text-align: right; }
div.vAlignMiddle { vertical-align: middle; }
div.outerDiv { display: table; }
div.innerDiv { position: relative; display: table-cell; font: inherit; }
</style>
</head> <div> <div class=" outerDiv alignLeft" style="top:0.5in; left:0in; width:10.5in; height:0.1917in; font:bold 12pt 'Arial'; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >My Report </div>
</div> <div class=" outerDiv alignLeft" style="top:0.89in; left:0in; width:3.5in; height:0.1118in; font:bold 7pt 'Arial'; border-bottom-style: solid; border-bottom-color: #000000; border-bottom-width: 1px; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >Name </div>
</div> <div class=" outerDiv alignLeft" style="top:0.89in; left:3.52in; width:1.5in; height:0.1118in; font:bold 7pt 'Arial'; border-bottom-style: solid; border-bottom-color: #000000; border-bottom-width: 1px; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >Address 1 </div>
</div> <div class=" outerDiv alignLeft" style="top:0.89in; left:5.04in; width:1.5in; height:0.1118in; font:bold 7pt 'Arial'; border-bottom-style: solid; border-bottom-color: #000000; border-bottom-width: 1px; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >Address 2 </div>
</div> <div class=" outerDiv alignLeft" style="top:0.89in; left:6.56in; width:1in; height:0.1118in; font:bold 7pt 'Arial'; border-bottom-style: solid; border-bottom-color: #000000; border-bottom-width: 1px; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >City </div>
</div> <div class=" outerDiv alignLeft" style="top:0.89in; left:7.58in; width:0.5in; height:0.1118in; font:bold 7pt 'Arial'; border-bottom-style: solid; border-bottom-color: #000000; border-bottom-width: 1px; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >State </div>
</div> <div class=" outerDiv alignLeft" style="top:0.89in; left:8.1in; width:2.5in; height:0.1118in; font:bold 7pt 'Arial'; border-bottom-style: solid; border-bottom-color: #000000; border-bottom-width: 1px; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >Category </div>
</div> <div class=" outerDiv wrap alignLeft" style="top:5.2918in; left:0in; width:3.5in; height:0.11in; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >Company One </div>
</div> <div class=" outerDiv wrap alignLeft" style="top:5.2918in; left:3.52in; width:1.5in; height:0in; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " > </div>
</div> <div class=" outerDiv wrap alignLeft" style="top:5.2918in; left:5.04in; width:1.5in; height:0in; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " > </div>
</div> <div class=" outerDiv wrap alignLeft" style="top:5.2918in; left:6.56in; width:1in; height:0in; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " > </div>
</div> <div class=" outerDiv wrap alignLeft" style="top:5.2918in; left:7.58in; width:0.5in; height:0in; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " > </div>
</div> <div class=" outerDiv wrap alignLeft" style="top:5.2918in; left:8.1in; width:2.5in; height:0.56in; " > <div class="vAlignMiddle innerDiv" style="position: relative; display: table-cell; font: inherit; " >Zero, One, Two, Three, Four, Five, Six, Seven, Eight, Nine, Ten, Eleven, Twelve, Thirteen, Fourteen, Fifteen, Sixteen, Seventeen, Eighteen, Nighteen, Twenty, Twenty-one, Twenty-two, Twenty-three, Twenty-three </div>
</body>
</html>
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,218
|
Hi, This is because the default margin for EO.Pdf is 1 inch on each size and the default print margin in Google Chrome is 0.5 inch. Generally it is not a good idea for you to design your report to rely on specific margin settings. However if you just want this particular report to work, you can change EO.Pdf margins to 0.5 inch. For example:
Code: C#
HtmlToPdf.Options.PageSize = new SizeF(PdfPageSizes.Letter.Height, PdfPageSizes.Letter.Width);
HtmlToPdf.Options.OutputArea = new RectangleF(0.5f, 0.5f, 10f, 7.5f);
HtmlToPdf.ConvertUrl(report.html, pdf_file);
This should give you the desired result. Thanks!
|
Rank: Newbie Groups: Member
Joined: 3/17/2020 Posts: 4
|
eo_support wrote:Hi, This is because the default margin for EO.Pdf is 1 inch on each size and the default print margin in Google Chrome is 0.5 inch. Generally it is not a good idea for you to design your report to rely on specific margin settings. However if you just want this particular report to work, you can change EO.Pdf margins to 0.5 inch. For example:
Code: C#
HtmlToPdf.Options.PageSize = new SizeF(PdfPageSizes.Letter.Height, PdfPageSizes.Letter.Width);
HtmlToPdf.Options.OutputArea = new RectangleF(0.5f, 0.5f, 10f, 7.5f);
HtmlToPdf.ConvertUrl(report.html, pdf_file);
This should give you the desired result. Thanks! I adjusted the page margin per your recommendation but the text is still cut off at the edge. EDIT: I noticed that our report's margin is set to 0.25 on each side.
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,218
|
What version do you use? We tested on the latest build and it seems to work fine for us.
|
Rank: Newbie Groups: Member
Joined: 3/17/2020 Posts: 4
|
eo_support wrote:What version do you use? We tested on the latest build and it seems to work fine for us. We have version 15.3.1.0.
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,218
|
Hi,
You should switch to the latest version. Version 15 uses an old WebKit based browser engine that can render things very differently than Google Chrome. We switched to Google's Chromium engine since version 16. Even with Chromium engine, different version can still render different result. This is why we have been constantly updating the version of Chromium engine we use every year.
Another reason that we keep upgrading browser engine is for security. Browser engine updates very fast these days and new security issues are constantly being discovered and patched. So running an 5 years old EO.Pdf is like running a Web browser or Windows without applying any security patches for 5 years. This obviously is not a good idea.
Thanks!
|
Rank: Newbie Groups: Member
Joined: 3/17/2020 Posts: 4
|
Thanks for your guidance.
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,218
|
You are very welcome. Please feel free to let us know if you have any more questions.
|