Issues while converting html to PDF using nodejs and Phantomjs

Posted By : Sachin Arora | 27-Jun-2017

Hi all,

There are some html and CSS issues which you might face while generating/converting your html to PDF using nodejs and Phantomjs. 

 

1. Problem in including Bootstrap library

if you are using bootstrap in your html and you are using the library in your folder and setting it's path it might not work.

like <link href="css/bootstrap.min.css" rel="stylesheet">

so instead of including the library like this you should give the 'cdn' 

example:<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 

by using the 'cdn' your problem will be solved.

 

2. Problem in using Bootstrap Columns

In html to PDF conversion, you might be using the bootstrap column structure. When you convert your html to PDF you might see that your PDF is distorted that is because your bootstrap columns are not working .

This happens because you are using columns like   "col-sm-.. , col-md-.. , col-lg-..  "  . 

Instead of using column small,medium and large use the extra small columns in your whole html file "col-xs-.." 

This way replace all the columns with XS and your PDF structure is exactly what you needed.

 

3. Problem in using the CSS.

This is one of the major issue, that how to add the css in your html to PDF conversion. If you are using the external css in your html it will not be included at the time of conversion <link href="css/mystylesheet.css" rel="stylesheet"> 

So you need add the css internally in your html file by using the <style> tag inside your head part.

Example:

<head>

<style>

//here comes your CSS

</style>

<head>

So by adding the css internally your problem gets solved.

 

4. Problem in adding the Background Images and Colours.

When you convert your html to PDF using phantomjs you might see that your pdf doesn't contain any background images but the images which you have given in html using the <img src=""> are appearing fine.

there is a problem with background images css 

 
        .cover_bg {
            background: url("images/cover_bg.jpg") no-repeat center top ;
        }

        .nameHeading {
            color: #f89320;
         }

 

So to solve this issue you just need to add "!important" in all  your background images and color CSS.


Example:

                     .cover_bg {
            background: url("images/cover_bg.jpg") no-repeat center top !important;
        }

        .nameHeading {
            color: #f89320 !important;
         }

so this way your problem can be solved.

 

5. Problem to set the page height and width of your generated PDF.

you might be wondering that the dimensions of your html page/canvas is different from that of PDF. You can set the height and width of the page of your generated pdf by passing the value of height and width to the function where your pdf is being generated.

Example:

function generatePdf(callback) {
    ejs.renderFile(__dirname + '/indexHTP.ejs', {}, {}, function(err, html) {

        if (html) {
           
            var pdfFileName = (new Date()).getTime() + "HTP.pdf";

            pdf.create(html, options).toFile('uploads/' + pdfFileName, function(err, result) {
                if (err) {
                    return console.log(err);
                } else {
                    callback(null, { 'filePath': 'http://180.151.85.194:3001/download/' + pdfFileName, 'fileName': pdfFileName });
                }
            });
        } else {

            console.log("no html",err);
        }
    });
}
 

this above code generates the pdf with default dimensions now have to add your own dimensions like   var options = { height: '842px', width: '595px'};

 

function generatePdf(callback) {
    ejs.renderFile(__dirname + '/indexHTP.ejs', {}, {}, function(err, html) {

        if (html) {
           var options = { height: '842px', width: '595px'};
            var pdfFileName = (new Date()).getTime() + "HTP.pdf";

            pdf.create(html, options).toFile('uploads/' + pdfFileName, function(err, result) {
                if (err) {
                    return console.log(err);
                } else {
                    callback(null, { 'filePath': 'http://180.151.85.194:3001/download/' + pdfFileName, 'fileName': pdfFileName });
                }
            });
        } else {

            console.log("no html",err);
        }
    });
}
 

So by this you can set the dimensions of your page .

About Author

Author Image
Sachin Arora

Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .

Request for Proposal

Name is required

Comment is required

Sending message..