12

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 ubuntu

Output on windows enter image description here

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

  1. Giving fixed "height": "10.5in" & "width": "8in" in options in JS file

  2. Making margin-top & padding-top to 0px/-50px to pageHeader div.

  3. Overriding margin-top & padding of body to 0px/-20px in @media print in bootstrap.css
  4. Giving fixed height to header

Any help will be greatly appreciated. Thanks.

Pranav Mahajan
  • 2,048
  • 2
  • 23
  • 36

3 Answers3

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;}
Laurel
  • 5,965
  • 14
  • 31
  • 57
Cristian Ricardo Barusta Sanch
  • 166
  • 1
  • 3
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.

kicken
  • 2,122
  • 14
  • 17
0

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

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

colonelclick
  • 2,165
  • 2
  • 24
  • 33