Welcome Guest Search | Active Topics | Sign In | Register

EO.PDF ShrinkToFit and page-break-inside:avoid Options
Ibiuna
Posted: Wednesday, August 31, 2011 3:46:57 PM
Rank: Advanced Member
Groups: Member

Joined: 8/31/2011
Posts: 34
Hi,

I'm currently testing EO.PDF before buying it.

But i came across a problem that a can't figure out.
I'm using HtmlToPdf.ConvertUrl on a page with the following structure:

<div class="mainContent">
<asp:PlaceHolder ID="header" Visible="true" runat="server">
</asp:PlaceHolder>
<br />
<br />
<div class="containerLine">
<div class="reportLeft" >
<asp:PlaceHolder ID="reportA" Visible="true" runat="server">
</asp:PlaceHolder>
</div>
<div class="reportRight" >
<asp:PlaceHolder ID="reportB" Visible="true" runat="server">
</asp:PlaceHolder>
</div>
</div>
<div class="containerLine">
<asp:PlaceHolder ID="chartsArea" Visible="true" runat="server">
</asp:PlaceHolder>
</div>
</div>

and the following css:

.containerLine
{
width:1066px;
float:left;
padding:15px;
padding-top:25px;
height:auto;
page-break-after:always;
/*page-break-inside:avoid;*/
}

.mainContent{
width:1116px;
float:left;
margin-left:15px;
margin-bottom:15px;
}

The first containerLine may be larger than a page, so a put both y and x to shrinkToFit but when i do that the second containerLine with the charts is not rendered, but only when the first div is larger than a page.
If i comment the page-break-inside:avoid; as above and keep the shrinkToFit the same problem occurs.
If i take out both the page break and srink to fit, everything works fine, but my report is cut.
If i left only the page break, i get a system.OutOfMemory exception (extending the timeout). Notice that, both the report and charts are not very large (the report is 1.5 pages and there are only 2 charts, 1050 x 350 100k each.)

Could you please help me ?
Ibiuna
Posted: Wednesday, August 31, 2011 4:12:53 PM
Rank: Advanced Member
Groups: Member

Joined: 8/31/2011
Posts: 34
Ok, just read in the manual that page-break-inside: avoid clips off the exceding part.

So how can i shrink to fit the first page and render the second ?
eo_support
Posted: Wednesday, August 31, 2011 4:28:54 PM
Rank: Administration
Groups: Administration

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

Thanks for posting in the forum. We are still looking into this issue, there appears to be a bug.

Here is how it SHOULD work:

1. By default, AutoFitX is ShrinkToFit and AutoFitY is None. This will shrink your pages horizontally to avoid clippings horizontally. If your pictures are being clipped off vertically, try to apply "page-break-inside:avoid" on your picture. That will move the pictures to the next page if it is too large to fit in one page;

2. If your picture is taller than one page and you have "page-break-inside:avoid" on it, you will get out of memory or time out value in our earlier versions. This is a bug that has already been fixed and it appears to be the bug that you ran into. So please check whether you have the latest build (the last version has a DLL version number of 3.0.63.2). If you do not have it, the latest build should fix this problem for you;

3. If you have both AutoFitX and AutoFitY set to ShrinkToFit, then all your page-break instructions will be ignored because once AutoFitY is set to ShrinkToFit, everything will be shrunk to fit into a single page. This is why you do not see a second page in this case. However instead of placing your chart image at the bottom of the first page, the converter still picked up the page-break-after:always instructions and try to render the chart image to a second page that does not exist. This is bug that we are looking into right now. We should be able to fix it and provide you an update build very quickly once confirmed.

If scenario #3 is not your intended scenario (everything on a single page), then the default settings for scenario #1 should work for you. The road block is the bug described in #2. In that case you can download the latest build from our download page and it should resolve the problem for you.

Hope this helps. Please let us know if you still have any questions. We will reply again on #3 as soon as we have an update on that.

Thanks!
Ibiuna
Posted: Wednesday, August 31, 2011 4:40:57 PM
Rank: Advanced Member
Groups: Member

Joined: 8/31/2011
Posts: 34
Thank you for the prompt response.

How do i check which version i'm currently using ?
eo_support
Posted: Wednesday, August 31, 2011 4:43:23 PM
Rank: Administration
Groups: Administration

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

You just right click your EO.Pdf.dll and check the DLL version number.

Thanks
eo_support
Posted: Thursday, September 1, 2011 12:10:24 PM
Rank: Administration
Groups: Administration

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

We have posted a new build (.64) that fixed scenario #3. You can download it from our download page.

Thanks!
Ibiuna
Posted: Thursday, September 1, 2011 1:46:38 PM
Rank: Advanced Member
Groups: Member

Joined: 8/31/2011
Posts: 34
Thank you very much for the quick correction.

Indeed problem 2 and 3 were solved by updating the building i was using.

But i still have a problem.
Using the default options, there is a problem when the firts containerLine is bigger than a page. Even though I'm using page-break-inside:avoid; in the containerLine css, the div is still cut.
How can i shrink that div to fit into 1 page and leave the rest as is ?

edit: Ah, i don't know if that matters or not, but the function is creating a blank page before the first container, but only when that container is bigger than a page.
eo_support
Posted: Thursday, September 1, 2011 2:21:03 PM
Rank: Administration
Groups: Administration

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

The blank page is the correct behavior. What happens is you have a few whitespaces before this "page-break:avoid" big block. When the converter tries to position such block on a page, it will see if the remaining space of the current page can fit the block, if it can not, then move to next page unless the current page is already completely empty. In your case, the first page has no visible element but it's not empty.

The auto shrink/scale feature use a single scale factor for the whole conversion. It does not use a different scaling factor for each page. If you wish to have different zoom factors for different portion of your page, the best way is to separate them into multiple conversions. You can output the result of multiple conversions into a single PDF file.

Solution 1: Call ConvertUrl twice

The code will be something like this:

Code: C#
PdfDocument doc = new PdfDocument();

//Convert the top part. Note we set both AutoFitX and AutoFitY
//to ShrinkToFit, this make sure the result fits into a single
//page
HtmlToPdf.Options.AutoFitX = HtmlToPdfAutoFitMode.ShrinkToFit;
HtmlToPdf.Options.AutoFitY = HtmlToPdfAutoFitMode.ShrinkToFit;
HtmlToPdf.ConvertUrl("Your_Page.aspx?portion=top", doc);

//Now Convert the bottom part. You do not need to set
//AutoFitX or AutoFitY here (both property are automatically
//reset to default value after the previous conversion). The
//following two line make sure the conversion output starts
//from the second page
HtmlToPdf.Options.StartPageIndex = 1;
HtmlToPdf.Options.StartPagePosition = 0;
HtmlToPdf.ConvertUrl("Your_Page.aspx?portion=bottom", doc);

//Now you have both portions in a single PdfDocument object,
//you can do anything you want to do with the result doc object
.....


Note the additional query string "portion=top" and "portion=bottom" added to your page Url. You will need to write the code in your page (usually inside your Page_Load event handler) to check for this argument and "turn off" certain portion of your page respectively. For example, if you see "portion=bottom", you would call something like this:

Code: C#
//Turn off the top report. You may also need to turn
//off other elements as well
if (Request.QueryString["portion"] == "bottom")
   reportA.Visible = false;


Solution 2: Use CSS zoom attribute

Alternatively, you can try CSS zoom attribute to only shrink reportA:

Code: HTML/ASPX
<div style="zoom:50%">
    content inside this div will shrink to 50% of its orginal size
</div>


This will work if you can use a fixed zoom value (it is possible to use JavaScript to dynamically calculate a "best" zoom value but it will probably result in a more complicated solution than the previous solution, so it may not be worth it). Another disadvantage of using CSS zoom is it may produce blank pages at the end of the document. Also you can not use CSS zoom and page-break-xxxx CSS on the same element. So use a separate DIV to apply the zoom factor only.

Hope this helps. We recommend solution 1. However solution 2 can be a cheap quick fix if you need something really quick.

Please let us know if this solves the problem for you.

Thanks!

Ibiuna
Posted: Thursday, September 1, 2011 2:28:44 PM
Rank: Advanced Member
Groups: Member

Joined: 8/31/2011
Posts: 34
Thank you for the response.

Thought i find another solution than breaking up the page.
But, i also think is the best solution. Gonna try to implement it, and after that i'll post the result here.

Thanks again for the help.
Ibiuna
Posted: Thursday, September 1, 2011 8:09:49 PM
Rank: Advanced Member
Groups: Member

Joined: 8/31/2011
Posts: 34
Works like a charm !

Just altered the code to:

HtmlToPdf.Options.StartPageIndex = 0;
HtmlToPdf.Options.StartPosition = 0;

If i left on page 1 it would put a blank page between the report and the charts.

Thank you very much for the suport !

Awesome product and suport !
eo_support
Posted: Thursday, September 1, 2011 8:18:02 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Ah! Glad that it works out for you! Please do not forget to post a note somewhere on the Internet to suggest our product to other people. : )


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.