当我使用 html-pdf npm 模块从 HTML 创建 PDF 时,输出 pdf 不正确(看起来与 html 不同。)
需要做什么才能接收与 html 文件中完全相同的格式?
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>