Div of page size render larger than page of the same defined size? #198

ajmas · 2016-10-20T19:05:20Z

Whether I try the html-pdf command or render the page from within the API, any elements I specify with a dimension end up being bigger than they should be. Essentially if I define a div to be the same dimensions of the page it still ends up being 30% bigger than the page.

The HTML, intending to fit within a single page of US letter size:

<html>
<head>
   <title>test case</title>
</head>

<body style="background-color: yellow">
  <div style="width: 21cm; height: 27cm; border: solid 1px black;">This should be within page bounds!?</div>

</body>
</html>

The JS I was using:

var fs = require('fs');
var pdf = require('html-pdf');


var options = {

  // Export options
  "directory": "/tmp",       // The directory the file gets written into if not using .toFile(filename, callback). default: '/tmp'

  "width": "216mm",            // allowed units: mm, cm, in, px
  "height": "279mm",        // allowed units: mm, cm, in, px

  // File options
  "type": "pdf",             // allowed file types: png, jpeg, pdf
  "quality": "100",           // only used for types png & jpeg

  // Script options
  "phantomPath": "./node_modules/phantomjs-prebuilt/bin/phantomjs"

};

var html = fs.readFileSync('./tests/document.html', 'utf8');

pdf.create(html, options).toFile('./out.pdf', function(err, res) {
  if (err) { 
    return console.log(err);
  }
  console.log(res);
});

Using node-html-pdf version 2.1.0, MacOS X 10.12, NodeJS 6.7.0

The text was updated successfully, but these errors were encountered:

andreleon · 2016-10-21T12:35:36Z

I am having the exact same issue

srokatonie · 2016-11-01T22:05:27Z

Yes, very same problem!

heks · 2016-11-07T21:18:28Z

Yes, I can confirm I am encountering the same issue.

minmur · 2016-11-18T13:09:24Z

+1

marcbachmann · 2016-11-18T13:42:07Z

I had to use html {zoom: .75;} to get the proper size.

molomby · 2016-11-25T05:19:28Z

I'm guessing this relates to the PhantomJS update? See notes here.. #107

If it is the same issue, there's a long discussion at.. ariya/phantomjs#12685

Sounds like a real mess. There was an issue introduced in Phantom v1.9 with a fix in v2.0 but apparently v2.0 also introduced a related but different issue, with similar similar symptoms, that affected different platforms. TL;DR: There's a lot of confusion.

The solution @marcbachmann mentions is popular. For me the magic number was 0.72:

html { zoom: 0.72; }

ajmas · 2016-11-25T06:58:26Z

@molomby It certainly looks like the issue.

Playing around on my machine (MacBook Air 13", 10.12.1) it is about 0.65. I suspect I'll need to tune this for each host I'll be deploying to?

PetarIvancevic · 2017-01-19T13:27:27Z

If you are going for A4 then check the aspect ratio on it (1:1.414). Then you can set

width: 1000px
height: 1414px

Also make sure that your elements don't have margin, because that can offset the whole page.
You only get a small white line at the bottom of the page, but since it's a white paper you don't see it.

marcbachmann · 2017-12-19T19:13:42Z

There is still no resolution on that issue in the phantomjs repository.
We could do a workaround and define the custom sizes by ourselves. We would have at least the correct aspect ratio which fits the wrong measurements inside the pdf.

e.g.
for A4 it is
{width: '280mm', height: '396mm'} < 210/0.75 equals 280
instead of the original
{width: '210mm', height: '297mm'}

for Letter it is
{width: '287.86mm', height: '372.53mm'} < 215.9/0.75 equals 287.8666666667
instead of the original
{width: '215.9mm', height: '279.4mm'}

You could call that using
pdf.create(html, {width: '...', height: '...'}).toFile('./out.pdf', cb)

The magic number is 0.75 here

ajmas · 2017-12-19T23:58:54Z

At this point I have moved on after having discovered puppeteer (developed by Google), which works well for my needs.

See: https://www.npmjs.com/package/puppeteer

I won't close this ticket, since there are likely to still be people wanting to see this ticket fixed.

marcbachmann · 2017-12-20T00:09:35Z

This module certainly doesn't fit everybody's need. I'm also using puppeteer a bit. 👍
If you need headers & footers there's currently no good alternative. drawbacks everywhere 😢

ggendre · 2018-06-08T09:21:51Z

on my side {width: '210mm', height: '297mm', borders:'1cm'} in options and zoom: 0.75; on html in CSS did the trick.

cduque · 2020-04-02T12:53:47Z

Thanks for the trick, 0.75 zoom worked for me too.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Div of page size render larger than page of the same defined size? #198

Div of page size render larger than page of the same defined size? #198

ajmas commented Oct 20, 2016 •

edited

andreleon commented Oct 21, 2016

srokatonie commented Nov 1, 2016

heks commented Nov 7, 2016

minmur commented Nov 18, 2016

marcbachmann commented Nov 18, 2016

molomby commented Nov 25, 2016

ajmas commented Nov 25, 2016 •

edited

PetarIvancevic commented Jan 19, 2017

marcbachmann commented Dec 19, 2017 •

edited

ajmas commented Dec 19, 2017

marcbachmann commented Dec 20, 2017

ggendre commented Jun 8, 2018

cduque commented Apr 2, 2020

Div of page size render larger than page of the same defined size? #198

Div of page size render larger than page of the same defined size? #198

Comments

ajmas commented Oct 20, 2016 • edited

andreleon commented Oct 21, 2016

srokatonie commented Nov 1, 2016

heks commented Nov 7, 2016

minmur commented Nov 18, 2016

marcbachmann commented Nov 18, 2016

molomby commented Nov 25, 2016

ajmas commented Nov 25, 2016 • edited

PetarIvancevic commented Jan 19, 2017

marcbachmann commented Dec 19, 2017 • edited

ajmas commented Dec 19, 2017

marcbachmann commented Dec 20, 2017

ggendre commented Jun 8, 2018

cduque commented Apr 2, 2020

ajmas commented Oct 20, 2016 •

edited

ajmas commented Nov 25, 2016 •

edited

marcbachmann commented Dec 19, 2017 •

edited