1

When I create a PDF from HTML using the html-pdf npm module, the output pdf is not correct (does not look the same as the html.)

What needs to be done to receive exact same format as in html file?

HTML PAGE ->test.html page PDF PAGE . - >test.pdf

var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./test.html', 'utf8');
var options = { format: 'Letter'};

pdf.create(html, options).toFile('./test.pdf', function(err, res) {
  if (err) return console.log(err);
  console.log(res); // { filename: '/app/businesscard.pdf' }
});


< !Doctype
  html>
  <html>

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

  <body>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
     style="background: white">

  <div class="container-fluid"
       style="font-family: sans-serif">

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="col-lg-7 col-md-7 col-xs-7 col-sm-7">
        <div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 PdftopBarStyle paddingOfCols">
          <label>
            <strong>BL:#{{randomNumber}}</strong>
          </label>
          <br>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 paddingOfCols"
             style="vertical-align: middle">
          <img src="app/img/printlogo.png"
               alt="App Logo"
               class="img-responsive"
               style="width:100%; " />
        </div>

        <div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 PdftopBarStyle paddingOfCols"
             style="padding-right: 0px;">

          <label style="float:right">
            <strong>Date:{{dateTime}}</strong>
          </label>
        </div>
      </div>
    </div>
    <br>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
         style="height: auto">
      <div class="col-lg-7 col-md-7 col-xs-7 col-sm-7"
           style="border: 1px solid black; padding: 0px">
        <div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 paddingOfCols">
          <b>Order Description:</b>
        </div>
        <div class="col-lg-8 col-md-8 col-xs-8 col-sm-8"
             style="padding-left: 0px;padding-right: 0px;">
          <p style="width:90%;word-wrap:break-word;">{{job.job_description}}</p>
        </div>
      </div>
    </div>
    <br>
    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
         ng-if="hasPickup">
      <b>Pickup Details:</b>
      <br>
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
           style="border: 1px solid black; padding: 0px">
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Name:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{job.job_pickup_name}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Email:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{job.pickup_email}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Phone No:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{pick_up_phone}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Pickup Time:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{pickupTime}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Address:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p style="word-wrap:break-word;">{{pickup_Address}}</p>
          </div>
        </div>
        <br>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 "
             ng-repeat="field in items_pickup track by $index"
             ng-init="pIndex=$index">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">
            <label>{{field.label}}</label>
          </div>
          <div class="col-lg-4 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;"
               ng-if="field.data_type!='Dropdown'">
            {{field.input}}
          </div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;"
               ng-if="field.data_type=='Dropdown'">
            {{field.data}}
          </div>


        </div>
      </div>

    </div>
    <br>

    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
         style="margin-top:10px "
         ng-if="hasDelivery">

      <b>Delivery Details:</b>
      <br>
      <div class="col-lg-7 col-md-7 col-xs-7 col-sm-7"
           style="border: 1px solid black; padding: 0px">
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Name:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{job.customer_username}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Email:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{job.customer_email}}</p>
          </div>
        </div>

        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Phone No:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{delivery_phone}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Delivery Time:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{deliveryTime}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">Address:</div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p style="word-wrap:break-word;">{{deliver_Address}}</p>
          </div>
        </div>
        <br>
        <div class="col-lg-12 col-md-12 col-sm-12 rm-padding"
             ng-repeat="field in items_delivery track by $index"
             ng-init="pIndex=$index">
          <div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols">
            <label>{{field.label}}</label>
          </div>
          <div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
               style="font-weight: 300;border-left: 1px solid black;">
            <p>{{field.input}} </p>
          </div>


        </div>
      </div>
    </div>
    <br>
    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
         style="margin-top:10px; margin-bottom: 10px !important; ">

      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
           style="padding: 0px;">
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <b>Shipper Signature:</b>
            <br>
            <div style="height: 50px; border: 1px solid black"
                 class="SignatureStyle">
            </div>

          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pdfPadding">
            <b>Driver Name:</b>
            <br>
            <div style="height: 50px;border: 1px solid black"
                 class="SignatureStyle">
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </body>

  </html>
Joris Schellekens
  • 8,483
  • 2
  • 23
  • 54
Rohan Singh
  • 81
  • 1
  • 1
  • 8
  • My comment is not 100% related to your question, but if you plan deploying this into linux, you should use another library since styles and fonts gets changed. For your question, I guess bootstrap not playing well, try setting `width="100%"`on your tables – Rafael del Rio Jan 16 '18 at 09:27
  • remove all the cols- except col-xs-x. col-xs is the only one being applied into the pdf – yBrodsky Jan 16 '18 at 18:40
  • Also, your markup is messed up. Read the bootstrap documentation – yBrodsky Jan 16 '18 at 18:41

0 Answers0