title: Pdf rendering issue in html-pdf
body: <p>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.)</p>
  
  <p>What needs to be done to receive exact same format as in html file?</p>
  
  <p>HTML PAGE -><a href="https://i.stack.imgur.com/zvfWE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvfWE.png" alt="test.html page"></a>
  PDF PAGE . - ><a href="https://i.stack.imgur.com/nUNTx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nUNTx.png" alt="test.pdf"></a></p>
  
  <pre><code>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' }
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt; !Doctype
    html&gt;
    &lt;html&gt;
  
    &lt;head&gt;
  &lt;link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  &lt;div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
       style="background: white"&gt;
  
    &lt;div class="container-fluid"
         style="font-family: sans-serif"&gt;
  
      &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
        &lt;div class="col-lg-7 col-md-7 col-xs-7 col-sm-7"&gt;
          &lt;div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 PdftopBarStyle paddingOfCols"&gt;
            &lt;label&gt;
              &lt;strong&gt;BL:#{{randomNumber}}&lt;/strong&gt;
            &lt;/label&gt;
            &lt;br&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 paddingOfCols"
               style="vertical-align: middle"&gt;
            &lt;img src="app/img/printlogo.png"
                 alt="App Logo"
                 class="img-responsive"
                 style="width:100%; " /&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 PdftopBarStyle paddingOfCols"
               style="padding-right: 0px;"&gt;
  
            &lt;label style="float:right"&gt;
              &lt;strong&gt;Date:{{dateTime}}&lt;/strong&gt;
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
           style="height: auto"&gt;
        &lt;div class="col-lg-7 col-md-7 col-xs-7 col-sm-7"
             style="border: 1px solid black; padding: 0px"&gt;
          &lt;div class="col-lg-4 col-md-4 col-xs-4 col-sm-4 paddingOfCols"&gt;
            &lt;b&gt;Order Description:&lt;/b&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-8 col-md-8 col-xs-8 col-sm-8"
               style="padding-left: 0px;padding-right: 0px;"&gt;
            &lt;p style="width:90%;word-wrap:break-word;"&gt;{{job.job_description}}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
           ng-if="hasPickup"&gt;
        &lt;b&gt;Pickup Details:&lt;/b&gt;
        &lt;br&gt;
        &lt;div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
             style="border: 1px solid black; padding: 0px"&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Name:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{job.job_pickup_name}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Email:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{job.pickup_email}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Phone No:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{pick_up_phone}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Pickup Time:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{pickupTime}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Address:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p style="word-wrap:break-word;"&gt;{{pickup_Address}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
  
          &lt;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"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;
              &lt;label&gt;{{field.label}}&lt;/label&gt;
            &lt;/div&gt;
            &lt;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'"&gt;
              {{field.input}}
            &lt;/div&gt;
            &lt;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'"&gt;
              {{field.data}}
            &lt;/div&gt;
  
  
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;br&gt;
  
      &lt;div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
           style="margin-top:10px "
           ng-if="hasDelivery"&gt;
  
        &lt;b&gt;Delivery Details:&lt;/b&gt;
        &lt;br&gt;
        &lt;div class="col-lg-7 col-md-7 col-xs-7 col-sm-7"
             style="border: 1px solid black; padding: 0px"&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Name:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{job.customer_username}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Email:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{job.customer_email}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Phone No:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{delivery_phone}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Delivery Time:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{deliveryTime}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 rm-padding"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;Address:&lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p style="word-wrap:break-word;"&gt;{{deliver_Address}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;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"&gt;
            &lt;div class="col-lg-4 col-md-5 col-xs-6 col-sm-6 paddingOfCols"&gt;
              &lt;label&gt;{{field.label}}&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-8 col-md-7 col-xs-6 col-sm-6 paddingOfCols"
                 style="font-weight: 300;border-left: 1px solid black;"&gt;
              &lt;p&gt;{{field.input}} &lt;/p&gt;
            &lt;/div&gt;
  
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"
           style="margin-top:10px; margin-bottom: 10px !important; "&gt;
  
        &lt;div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
             style="padding: 0px;"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"&gt;
              &lt;b&gt;Shipper Signature:&lt;/b&gt;
              &lt;br&gt;
              &lt;div style="height: 50px; border: 1px solid black"
                   class="SignatureStyle"&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pdfPadding"&gt;
              &lt;b&gt;Driver Name:&lt;/b&gt;
              &lt;br&gt;
              &lt;div style="height: 50px;border: 1px solid black"
                   class="SignatureStyle"&gt;
              &lt;/div&gt;
  
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>