Wicked_pdf: Need help with fitting in images in one page

Created on 22 Aug 2012  路  20Comments  路  Source: mileszs/wicked_pdf

I am using wicked_pdf to generate PDF in my Rails(3.0) application. Everything is working just fine with a small glitch. I have a looping of dynamic sized data (say comments and images) which are sequentially arranged.The images have a frame into which they are placed. I need to move the framed image to next page if does not fit in the space on the current page. Currently what is happening is the end part of the frame moves to the next page if doesn't fit.

Most helpful comment

I use the this css style to controll auot page break:

img.auto-page-break { 
    page-break-before: auto;  
    page-break-inside: avoid;
 }

All 20 comments

Does anyone have any suggestions on how I would start content always from next page when it's breaking between pages.

Example - I have list of photos which i am exporting to pdf.
While listing some photos are cutting in two parts first is coming in one page and remaining coming on other page so how we start photo which is breaking in two part should always display from starting of the page

This css helps me control page breaks as much as is possible without resorting to using javascript to calculate the height of content:

div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak{ page-break-inside: avoid;
  /* http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21 */
}

Hey thanks lot

It's working without any issue

The fix worked! Thanks a lot.

Hi Linuxmonkey

Actually It's working on my local machine but i have deployed my code on Ec2 having 0.9.0-amd64 wkhtmltopdf version and it's not working there.
Could you please tell me which version of wkhtmltopdf should use on ec2 so it would work

That's a really old version. I would try to install 0.9.9 or at least 0.9.6.

I had version 0.9.6 installed on my EC2 server but there were problems with the no-break. It still cut the images into two. Later,I tried using the static binary of wkhtmltoimage-0.11.0_rc1-static-amd64.tar.bz2 . With this I could get the no-break working but there were problems in other images. On few pages the generated PDF showed 'drawing erorr' and on few pages image and text was visible only after selecting the area on the page.

Any suggestions?

I've never used wkhtmltoimage, so I can offer no useful advice there. I can only suggest that you try to standardize on wkhtmltopdf 0.9.9, since I've been reliably running that in production for a long time.

Sorry it was wkhtmltopdf static binary and not wkhtmltoimage : wkhtmltopdf-0.11.0_rc1-static-amd64.tar.bz2 . We are somehow not able to install the 0.9.9 version. We used the static binary wkhtmltopdf-0.9.9-static-amd64.tar.bz2 but it still shows the version to be 0.9.6

Could you please let us know which version of wkhtmltopdf is best for 64 bit EC2 machine and where to get it. We have tried different version of wkhtmltopdf but all have some problems and they are not able to diplay images properly. also style div.nobreak{ page-break-inside: avoid;} is not working for following version of wkhtmltopdf on EC2

wkhtmltopdf-0.10.0_rc2-static-amd64.tar.bz2
wkhtmltopdf-0.11.0_rc1-static-amd64.tar.bz2
wkhtmltopdf-0.9.9-static-amd64.tar.bz2

But if I am tring same style on my local 32 bit machine which is working

@TechSpirit Yes. Wkhtmltopdf 0.9.9 incorrectly identifies itself as 0.9.6. It got released and someone forgot to update the version number in the binary. @sunnybogawat I have no idea what is best on EC2, but I don't see how that would be any different than what works on your local system. Can you try the 32 bit binary on EC2?

Hi David

I had tried 32 bit version on EC2 but it's not working and all 64 amd version has issues.

I use the this css style to controll auot page break:

img.auto-page-break { 
    page-break-before: auto;  
    page-break-inside: avoid;
 }

YES! This has been such a bane in previous PDF generators I've used.

The page-break-inside: avoid; doesn't seem to be working for me _at all_ on images. page-break-before: always; seems to work for text elements though. Any other resources that might be able to help me figure this out?

I'm running wkhtmltopdf v 0.9.9 installed using the wkhtmltopdf-binary gem.

@markrickert Can you wrap your images with a div with page-break-inside: avoid;?

I don't think that selector has any effect directly on images. You may also have to cheat a little and add some  s inside the div, along with the image to make the rule respect it.

Looks like that did the trick! Thanks for the tip. Didn't realize I couldn't apply the style directly to img tags.

I have an img surrounded by divs, I'm applying page-break-inside: avoid to the divs instead of the img tag but to no avail...using wkhtmltopdf 0.12.2.1 (with patched qt).

HTML:

<div class="pyr-component plot2d" id="plot2d_0" name="This is a 2D default plot">
<h2>This is a 2D default plot</h2>
<a href="images/plot2d_0.png" target="_blank"><img src="images/plot2d_0.png"></a>
</div>

CSS:

.pyr-component:before { clear:both; }
.pyr-component { page-break-inside: avoid; }

For me, the pictures which were full width of the page (and smaller in height than the page) did break onto new pages with this css, but when an image was extreme portrait and not 100% of width, it did not break and was forced onto many pages. Setting the max-height for the img and initial width for the surrounding div in mm helped.

<div style="width:209mm;page-break-before:auto;page-break-inside:avoid;">
    <div>
        <img style="max-width:100%;max-height:280mm;"/>
    </div>
    <div>
        <span>title</span>
    </div>
</div>

I experienced that @unixmonkey 's solution does not work, when installing the library via composer.

Was this page helpful?
0 / 5 - 0 ratings