【发布时间】：2018-07-03 00:00:22
【问题描述】：
我有一个 div（带有 id 'receipt'）。为了测试，我做了一些着色以了解内容的呈现。
问题是，当我导出为 pdf 或打印收据时，内容的高度会被拼接，页面的一半会变成空白。
我用过 angularjs。下面是收据的代码块。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button type="button" class="btn btn-inline" ng-click="vm.back()"><</button>
<button type="button" class="btn btn-inline" ng-click="vm.print()">Print</button>
<button type="button" class="btn btn-inline" ng-click="vm.downloadPdf('receipt')">Pdf</button>
<div class="container-fluid" id="receipt" style="background: white">
<style type="text/css">
.invoice-title h2, .invoice-title h3 {
display: inline-block;
}
.table > tbody > tr > .no-line {
border-top: none;
}
.table > thead > tr > .no-line {
border-bottom: none;
}
.table > tbody > tr > .thick-line {
border-top: 2px solid;
}
.white-border-color {
border-color: white
}
</style>
<div class="box-typical box-typical-padding">
<div class="row">
<div class="col col-lg-12">
<!--<div class="row text-center">
<h5>
<strong>
<label class="text-center">
Invoice/Bill:
</label>
</strong>
</h5>
</div>-->
<div class="row text-center" ng-hide="true">
<label class="text-center" style="color: darkgray;">
Printed on {{vm.today | date}} from BizBook365, proudly developed by Code Coopers
</label>
</div>
<div class="col-xs-12" style="margin-top: 20px">
<div class="row">
<div class="col-xs-6">
<img ng-src="{{vm.model.shop.logoUrl}}" style="height:100px;width:100px" />
</div>
<div class="col-xs-6 text-right">
<br />
<br />
<address class="ng-binding">
Order # <strong>{{vm.model.orderNumber}}</strong>
{{vm.model.orderDate | date}}<br>
<strong>{{vm.model.orderReferenceNumber}}</strong>
</address>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Billed To:</strong><br>
{{vm.model.customerName}}<br />
{{vm.model.customerPhone}}<br />
{{vm.model.address.streetAddress}}<br />
<!--{{vm.model.address.addressName}}<br />-->
{{vm.model.address.area}} {{vm.model.address.thana}} {{vm.model.address.district}}<br />
l.
<strong>Note:</strong><br />
{{vm.model.customerNote}}<br />
Customer Total Due:<strong>( {{vm.model.customer.totalDue}} )</strong>
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>{{vm.model.shop.name}}</strong><br>
{{vm.model.shop.streetAddress}}<br />
{{vm.model.shop.area}},{{vm.model.shop.thana}},{{vm.model.shop.postCode}},{{vm.model.shop.district}}<br />
{{vm.model.shop.website}}<br />
{{vm.model.shop.facebook}}<br />
{{vm.model.shop.email}}<br />
{{vm.model.shop.phone}}<br />
</address>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default white-border-color">
<div class="panel-heading">
<h4 class="panel-title">Order summary</h4>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in vm.model.saleDetails track by $index" ng-hide="p.isReturned" ng-if="p.quantity>0">
<td>{{p.productDetailName}}</td>
<td class="text-center">{{p.salePricePerUnit}}</td>
<td class="text-center">{{p.quantity}}</td>
<td class="text-right">{{p.total}}</td>
</tr>
<tr>
<td class="thick-line"><strong>Product Total</strong></td>
<td class="thick-line"></td>
<td class="thick-line"></td>
<td class="thick-line text-right">{{vm.model.productAmount}}</td>
</tr>
<tr>
<td class="no-line"><strong>Delivery Charge</strong></td>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-right">{{vm.model.shippingAmount}}</td>
</tr>
<tr>
<td class="no-line"><strong>Total</strong></td>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-right">{{vm.model.totalAmount}}</td>
</tr>
<tr>
<td class="no-line"><strong>Discount</strong></td>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-right">{{vm.model.discountAmount}}</td>
</tr>
<tr>
<td class="no-line"><strong>Payable</strong></td>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-right">{{vm.model.payableTotalAmount}}</td>
</tr>
<tr>
<td class="no-line"><strong>Paid</strong></td>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-right"><strong>{{vm.model.paidAmount}}</strong></td>
</tr>
<tr>
<td class="no-line"><strong>Due</strong></td>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-right"><strong>{{vm.model.dueAmount}}</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>红色会导致页面底部有多余的空间。
【问题讨论】：
-
您使用什么库来创建 PDF？这可能就是你的问题所在。如果它在页面上正确呈现，那么这里没有任何人可以提供帮助。
-
这与 pdf 库无关。请检查已编辑的问题。谢谢
-
我不知道该告诉你什么。就个人而言，我讨厌尝试将网页呈现为 PDF。我宁愿只取值并将它们注入到我可以更好地控制的 PDF 中。我已经广泛使用了 TCPDF。但这需要大量的 PHP 知识。
标签： jquery html css twitter-bootstrap pdf