Size of Rendered Content

[moconchobhair]

I have built a page template that exports into a great looking PDF. However, when I deploy the project to AWS (running Amazon Linux 2015.09) and render the same PDF everything is too big. My image sizes and font sizes are set to specific px sizes but in the rendered PDF they are either not respected or the page size is somehow far too small.

The only options I'm specifying are as follows:

var options = {
   format: 'Letter', 
   "border": {
      "top": "0.4in",            // default is 0, units: mm, cm, in, px 
      "right": "0.43in",
      "bottom": "0.4in",
      "left": "0.43in"
   },
   "phantomPath": "./node_modules/phantomjs/bin/phantomjs", 
   "phantomArgs": [], 
   "timeout": 30000
};

Everything is specified within the HTML template, the style sheets are not linked in.

I don't see this covered in the existing issues. This doesn't appear to be a font-kerning issue.

I would appreciate any tips you might have.

thanks!

[marcbachmann]

Please keep in mind that phantomjs v1 renders things with 72px/inch. If you're using phantomjs v2, you might be interested in that: https://github.com/ariya/phantomjs/issues/12685

[marcbachmann]

I've just upgraded the module to phantomjs v2. Please try to render something with the newest version.

[GuillaumeLeclerc]

Hello,

I'm having the samge problem, text is too big. How can I change the pixel density ?

[moconchobhair]

@GuillaumeLeclerc, I haven't tried the upgrade @marcbachmann proposed because I haven't seen the update but I was able to solve the problem by adding the following line to the style sheet in my HTML template.

html { zoom: 0.55; }

[leetercola]

I'm having the same issue on Redhat linux on aws. Rendered pdf has no characters, installing all of the font libraries I can find on multiple threads for like issues hasn't helped so far. The response size is a lot smaller than when I run the application on a mac and I can't see any errors or indication as to why. No gzip, same html string.

[tylersamples]

This maybe related to a Qt issue(what PhantomJS uses to render,) upstream bugs are here: https://github.com/ariya/phantomjs/issues/13997 https://bugreports.qt.io/browse/QTBUG-52417

[pebblexe]

html { zoom: 0.55; }

that solved my issue completely; thank you @moconchobhair

[m3kwong]

Hardly a fix, imagine when something gets fixed, your pdf will then be super small maybe without even you noticing until you check. If you have an automated server that writes PDFS for example.

[Mathiasduc]

Agree with @m3kwong, is there a way to fix that?

[anhducbkhn]

@GuillaumeLeclerc, I haven't tried the upgrade @marcbachmann proposed because I haven't seen the update but I was able to solve the problem by adding the following line to the style sheet in my HTML template.

html { zoom: 0.55; }

It worked, thanks @moconchobhair

[Nikaoto]

zoom: 0.55 worked on the size but the alignment of the elements is still off some why. Everything just aligns to the left.

[Nikaoto]

After adjusting the zoom and applying some minor modifications, the pdf looks exactly the way I intended.

The generated pdf seemed to ignore flexbox which I was using to center some html tables horizontally. Just slapping a margin on them did the job for my use case, but anything more complex would need a different approach.

[DigitalLeaves]

Same problem. In my case, my app has the option of delivering html and pdf versions, so using html zoom to 0.55 is more like a hack, not a real solution. Also, what happens behind the scenes is that the whole HTML is shrinking, so if you have, say, an invoice with a border around the HTML (1px border) it will display all wrong, like a small reduced version.

For reference, my HTML is using this CSS to display it correctly:

    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 16px; <=========
        line-height: 24px; <=========
        font-family: 'Lato', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
    }

To get the same results, the CSS for the PDF version should roughly be:

    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 10px; <=========
        line-height: 14px; <=========
        font-family: 'Lato', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
    }

Still, images get a big bigger on the PDF. Any update about this?

[ShreyashWanu]

You can also try font-size: 50% in body of html

Same problem. In my case, my app has the option of delivering html and pdf versions, so using html zoom to 0.55 is more like a hack, not a real solution. Also, what happens behind the scenes is that the whole HTML is shrinking, so if you have, say, an invoice with a border around the HTML (1px border) it will display all wrong, like a small reduced version.

For reference, my HTML is using this CSS to display it correctly:

    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 16px; <=========
        line-height: 24px; <=========
        font-family: 'Lato', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
    }

To get the same results, the CSS for the PDF version should roughly be:

    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        font-size: 10px; <=========
        line-height: 14px; <=========
        font-family: 'Lato', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color: #555;
    }

Still, images get a big bigger on the PDF. Any update about this?

In body try font-size:50%

[ShreyashWanu]

All the above mentioned issues can be fixed by font-size:50% in body of your html

[dayvidkelly]

All the above mentioned issues can be fixed by font-size:50% in body of your html

Has it been solved?