0

当我使用 html-pdf npm 模块从 HTML 创建 PDF 时,输出 pdf 不正确(看起来与 html 不同。)

需要做什么才能接收与 html 文件中完全相同的格式?

HTML 页面 -> test.html 页面 PDF 页面。- >测试.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>

4

0 回答 0