html-pdf npm library gives different output on windows & ubuntu

Question

I'm using https://www.npmjs.com/package/html-pdf library which is based on Phantom JS which internally uses webkit. I'm pasting the dummy HTML & JS code(keep these files in 1 folder) and also attaching the output screenshot.

The issue I'm facing is that on windows the PDF is generated with some extra space at top(empty space above red) which I can't get rid of.

Here is a forum(outdated) discussing similar issues, https://groups.google.com/forum/#!topic/phantomjs/YQIyxLWhmr0 .

input.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="pageHeader" style="border-style: solid;border-width: 2px;color:red;">
        header   <br/> header       <br/> header   <br/> header
    </div>
<div id="pageContent" style="border-style: solid;border-width: 2px;color:green;">
    <div>
        body    <br/> body    <br/> body
    </div>
</div>

JS (You require path, fs, handlebars, html-pdf npm packages)

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

saveHtml();

function saveHtml() {

fs.readFile('input.html', 'utf-8', {
    flag: 'w'
}, function(error, source) {
    handlebars.registerHelper('custom_title', function(title) {
        return title;
    })

    var template = handlebars.compile(source);
    var data = {};
    var html = template(data);

    var options = {
        'format': 'A4',
        'base': "file://",
        /* You can give more options like height, width, border */
    };
    pdf.create(html, options).toFile('./output.pdf', function(err, res) {
        if (err) {
            console.log('err pdf');
            return;
        } else {
            console.log('no err pdf');
            return;
        }
    });
});

}

Output on ubuntu

Output on windows

Extra space at top(empty space above red) in Windows is the issue.

THINGS that didn't work 1. Adding "border": { "top": "0px" // or mm, cm, in } to options in JS file

https://www.npmjs.com/package/html-pdf#options

Giving fixed "height": "10.5in" & "width": "8in" in options in JS file
Making margin-top & padding-top to 0px/-50px to pageHeader div.
Overriding margin-top & padding of body to 0px/-20px in @media print in bootstrap.css
Giving fixed height to header

Any help will be greatly appreciated. Thanks.

Laurel · Accepted Answer · 2016-08-31 00:33:01Z

15

You can manually set the CSS property to html tag. In my case I was having problems developing the template in Windows and deploying it to Linux (Heroku).

I put zoom: 0.7 in the label html and now both views look the same.

html{zoom: 0.7;}

edited Aug 31, 2016 at 0:33

Laurel

6,23114 gold badges35 silver badges60 bronze badges

answered Aug 31, 2016 at 0:10

Cristian Ricardo Barusta Sanch

1661 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

webnoob Over a year ago

Thanks for this, sorted my issue where Windows was displaying correctly but upload to Ubuntu server wasn't.

shiva Over a year ago

@Cristian : In my case pdf generater is generating extra page while it is blank, how did i resolve it?

Elmatsidis Paul Over a year ago

You made my day!

kicken · Accepted Answer · 2016-06-25 02:03:53Z

1

I was able to get more consistent results by removing the ID's so that it treated everything as content rather than separate header and content areas.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div style="border-style: solid;border-width: 2px;color:red;">
            header
        </div>
        <div style="border-style: solid;border-width: 2px;color:green;">
            <div>
                body
            </div>
        </div>
    </body>
</html>

If you need an ID for styling, use something other than pageHeader / pageFooter to avoid the special treatment associated with those IDs.

answered Jun 25, 2016 at 2:03

kicken

2,17715 silver badges19 bronze badges

Comments

colonelclick · Accepted Answer · 2016-06-26 04:51:53Z

0

Have you tried using a normalize style sheet to compensate for cross platform differences?

https://necolas.github.io/normalize.css/

answered Jun 26, 2016 at 4:51

colonelclick

2,2432 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

html-pdf npm library gives different output on windows & ubuntu

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related