Welcome Guest Search | Active Topics | Sign In | Register

Html To PDF Displaying Scroll Bars Options
monty
Posted: Thursday, November 8, 2012 9:45:40 PM
Rank: Newbie
Groups: Member

Joined: 11/8/2012
Posts: 5
EDIT: Had images reversed
This is how my HTML page looks in Chrome:

https://docs.google.com/open?id=0B00OaNfbP6GKaHBkQTBMbjJlbzQ

This is how the PDF looks:

https://docs.google.com/open?id=0B00OaNfbP6GKMjVsOEpyVF8yLUE




Here's my code:


HtmlToPdfOptions opts = new HtmlToPdfOptions();
opts.AutoFitX = HtmlToPdfAutoFitMode.None;
opts.AutoFitY = HtmlToPdfAutoFitMode.None;
opts.PreserveHighResImages = true;
PdfDocument doc = new PdfDocument();
HtmlToPdf.ConvertUrl(
"http://localhost:51489/Pages/Expenditure/Forms/AfePrintForm.aspx?id=e5f9b10b-8ee6-4fbe-a8a7-c7afb1ea77f5",
doc, opts);

HttpResponse response = HttpContext.Current.Response;
response.Clear();
response.AddHeader("Content-Type", "application/pdf");
//response.AddHeader("Content-Disposition", String.Format("inline; filename=AFE.pdf; size={0}", doc..Length.ToString()));
response.AddHeader("Content-Disposition", String.Format("inline; filename=AFE.pdf;"));
doc.Save(response.OutputStream);
response.End();
eo_support
Posted: Thursday, November 8, 2012 10:25:38 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,188
Hi,

That's normal. By default, the paper is only 6.5 inch wide (8.5 inch minus 1 inch margin on each side). When you have AutoFitX/Y set to none, that would be directly translated to 6.5 inch * 72 dpi = 468 pixel. If this is less than your page width, then scroll bar will appear.

To avoid scroll bars, you can either leave AutoFitX/Y to the default value (ShrinkToFit). This will automatically "shrink" your HTML page to fit the pdf page. Alternatively, you can manually set HtmlToPdf.Options.ZoomLevel. Setting it to a value less than 1 has the effect of increasing the DPI value. For example, setting it to 0.5 would double your page width from 468 pixels to 936 pixels.

Hope this helps. Please let us know if you have any more questions.

Thanks!
monty
Posted: Thursday, November 8, 2012 10:50:35 PM
Rank: Newbie
Groups: Member

Joined: 11/8/2012
Posts: 5
Thanks for the quick reply...

I changed the code to use the default options.

PdfDocument doc = new PdfDocument();
HtmlToPdf.ConvertUrl(
"http://localhost:51489/Pages/Expenditure/Forms/AfePrintForm.aspx?id=e5f9b10b-8ee6-4fbe-a8a7-c7afb1ea77f5",
doc);

But still with the scroll bars.

Changing the ZoomLevel to a smaller size does remove the horizontal scroll bars, but not the vertical. I've styled my DIVs with page-break-before:always where I want new pages.
eo_support
Posted: Thursday, November 8, 2012 11:31:09 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,188
Hi,

You will have to play with your HTML a little bit to fix that. The difference between the PDF converter and a browser is the size of the window vs the size of the paper, and a smaller paper size will cause scroll bars for you unless your page can grow vertically freely. Try to keep the small ZoomLevel value and remove/modify other part of your HTML until you see the scrollbar disappears. That should tell you what's causing it.

Thanks!
monty
Posted: Thursday, November 8, 2012 11:46:06 PM
Rank: Newbie
Groups: Member

Joined: 11/8/2012
Posts: 5
Once again... thanks for the prompt reply.. So far your support has made a great impression.

I would think that any content that doesn't fit vertically in the first page would trigger the creation of a second page and so on in the PDF? Is my assumption wrong? You think there something with the HTML such that it's not able to calculate the height it needs to insert additional PDF pages? I'm pretty savvy with HTML and CSS, as I am sure most of your customers are, but these are basic tables. Any tips? Have you seen this before with other customers? What did they do to resolve it (not looking for specifics)? I am sure I can remove HTML elements until the scroll bars disappear but that would defeat the purpose of wanting a multi-page report.

I am not sure that I understand what you mean by 'grow vertically freely'. Again, I would think that anything that doesn't fit in one PDF page would be automatically put in subsequent pages. The documentation says 'By default, the HTML to PDF converter automatically pages the contents. This is usually sufficient for most cases. '

Thanks again.

John
eo_support
Posted: Friday, November 9, 2012 12:01:35 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,188
Hi,

That depends. For simple contents such as text after text, yes. But there are millions of scenarios where your HTML/CSS would create scrollbars. We have a full blown browser engine embeded inside our DLL that works exactly the same way as a browser so it won't create vertical scrollbars for no reason.

The PDF converter will always try a lower height value first and then see if the contents exceeding that height. For example, if it tries to set the "window" height to 600 pixels and sees the content height is less than 600 pixels, then it will try no more. So if you have the following contents:

Code: HTML/ASPX
<div style="height:600px;">
    <div style="height:1000px;overflow:auto;">
    </div>
</div>


Then you will see a scroll bar created by the outer DIV and the converter will be just fine with total height as 600 pixels and won't try to page it.

To better understand this, these two rules applies with the converter:

1. The converter does not create scroll bars. If you see any scroll bars, its created by your HTML. Unlike a browser that can have two types of scroll bars: scroll bars by your HTML and scroll bars on the browser window, the converter does not have scroll bars on the "window";

2. The converter will start with the lower height value. This can cause scroll bars in your HTML. If your HTML height does not exceed the value the converter tries, it won't try again;

The first rule is pretty obvious. The second rule is for some page that has main content but a "docking" tool bar at the bottom of the page. For those pages you cannot measure the real page height because no matter how big your browser window is, the tool bar will always grow to the bottom of your window, where as the "real" contents may be far from reaching the bottom.

Because of these two rules, the most effective way for you to resolve your issue is to play with your HTML to find out what triggers the scrollbars. Since the progress bar are triggered by your HTML, you must change your HTML to fix them.

Hope this clears it up and make sense to you.

Thanks!
monty
Posted: Friday, November 9, 2012 12:06:17 AM
Rank: Newbie
Groups: Member

Joined: 11/8/2012
Posts: 5
Thanks for the in-depth answer! Much appreciated. And it does make much more sense... I will play with the HTML to see if I can get it to comply.

Thanks Again.

John
monty
Posted: Friday, November 9, 2012 12:40:11 AM
Rank: Newbie
Groups: Member

Joined: 11/8/2012
Posts: 5
So I figured out my problem and I am sharing it here so that perhaps it may help someone else.

I had the following style defined

Code: CSS
html, body, form { height: 100% !important; }


defined for the page, removed that and paging works with no scroll bars!!! Yippie!!!

And here's my code:

Code: C#
HtmlToPdfOptions opts = new HtmlToPdfOptions();
            opts.AutoFitX = HtmlToPdfAutoFitMode.ShrinkToFit;
            opts.AutoFitY = HtmlToPdfAutoFitMode.None;
            opts.ZoomLevel = 0.715f;
            opts.OutputArea = new RectangleF(0.25f, 0.25f, 8.0f, 10.75f);

            //opts.
            
            opts.PreserveHighResImages = true;
            PdfDocument doc = new PdfDocument();
            HtmlToPdf.ConvertUrl(
                "http://localhost/Pages/Expenditure/Forms/AfePrintForm.aspx?id="+ExpenditureId,
                doc, opts);
            
            HttpResponse response = HttpContext.Current.Response;
            response.Clear();
            response.AddHeader("Content-Type", "application/pdf");
            //response.AddHeader("Content-Disposition", String.Format("inline; filename=AFE.pdf; size={0}", doc..Length.ToString()));
            response.AddHeader("Content-Disposition", String.Format("inline; filename=AFE.pdf;"));
            doc.Save(response.OutputStream);
            response.End();
eo_support
Posted: Friday, November 9, 2012 7:32:34 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,188
Great. Thank you very much for sharing!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.