3
我創建了一個ERP系統，使用Node.JS作爲後端，AngularJS作爲前端。我需要打印發票。所以我需要將發票下載爲PDF。我用引導CSS設計了完整的Invoice格式。我有一個解決方案來打印。這是代碼。如何使用AngularJS動態加載數據來生成PDF？
$scope.downloadQuotation = function() {
html2canvas(document.getElementById('printQuotation'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 540
}]
};
pdfMake.createPdf(docDefinition).download("Quotation_'" + $scope.selectedQuotation.id + "'.pdf");
}
});
};
我使用的是'html2canvas'，也是pdf可以生成這個PDF。而'printQuotation'是該HTML Invoice的div名稱。有一個項目表加載動態數據和一些其他信息。只是一張正式發票。
該解決方案有時可以正常工作。但是，當顯示尺寸發生變化時，我只會得到一個空白的PDF。問題是如果發票不適合顯示用戶的機器（筆記本電腦），我們會得到一個空白的PDF。所以請幫助我。
實際上我並不需要這種方法。任何解決方案客戶端或服務器端。我的服務器是NodeJs，我看到很多解決方案並嘗試過。但不爲我工作。這是我需要轉換爲PDF的HTML頁面。
<div class="widgets">
<button class="btn btn-success" ng-click="printQuotation()">Print Quotation</button>
<button class="btn btn-info" ng-click="downloadQuotation()">Download Quotation</button>
<a class="btn btn-warning" href="#/quotation/add">Create New Quotation</a>
<a class="btn btn-primary" href="#/quotation/view">Back to View All</a>
<br><br>
<div class="row" ba-panel id="printQuotation">
<div style="min-width: 871px;overflow-x: scroll">
<div class="">
<hr>
<div class="row">
<div class="col-lg-6">
<p style="font-size: 18px;"><b>Quotation No : {{selectedQuotation.id}}</b></p>
</div>
<div class="col-lg-6" style="text-align: right">
<p style="font-size: 18px;"><b>Date : {{selectedQuotation.date | date:'yyyy-MM-dd'}}</b></p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p style="font-size: 18px;"><b>Mr/Messrs : {{selectedQuotation.customer_name}}</b></p>
<p style="font-size: 18px;">We have pleasure in submitting our offer for the following items
:</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p style="font-size: 18px;"><b>Pump No : : {{selectedQuotation.pump_no}}</b></p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p style="font-size: 18px;"><b>Se No : {{selectedQuotation.se_no}}</b></p>
</div>
<div class="col-lg-6" style="text-align: right">
<p style="font-size: 18px;"><b>Type : {{selectedQuotation.type}}</b></p>
</div>
</div>
<br><br>
<table class="table table-hover">
<thead>
<tr class="black-muted-bg">
<th style="font-size: 18px;">ID</th>
<th style="font-size: 18px;">Description</th>
<th style="font-size: 18px;">Qty</th>
<th style="font-size: 18px;">Unit Rate (R.O)</th>
<th style="font-size: 18px;">Amount (R.O)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in selectedQuotationItems" class="no-top-border">
<td style="font-size: 18px;">{{item.item_id}}</td>
<td style="font-size: 18px;">{{item.item_name}}</td>
<td style="font-size: 18px;">{{item.qty}}</td>
<td style="font-size: 18px;">{{item.unit_rate | currency:"":2}}</td>
<td style="font-size: 18px;">{{item.qty * item.unit_rate | currency:"":2}}</td>
</tr>
</tbody>
</table>
<hr>
<div class="row">
<div class="col-lg-6">
<p style="font-size: 18px;"><b>Note : {{selectedQuotation.remark}}</b></p>
</div>
<div class="col-lg-6" style="text-align: right">
<p style="font-size: 18px;"><b>Total Amount : {{selectedQuotation.total_amount |
currency:"":2}}</b></p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6" style="text-align: right">
<p style="font-size: 18px;"><b>Discount : {{selectedQuotation.discount | currency:"":2}}</b></p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6" style="text-align: right">
<p style="font-size: 18px;"><b>Net Amount : {{selectedQuotation.net_amount | currency:"":2}}</b>
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h3>PATROL INJECTOR SERVICES</h3>
<P style="font-size: 18px;">Specialist in all kinds of Diesel lnjection Pump & lnjectors</P>
<br>
<p>Prepared by : ................................</p>
</div>
<div class="col-lg-6" style="text-align: right">
<h3>For MUSCAT DIESEL PUMP SERVICES</h3>
<br>
<p style="font-size: 18px;">Authorized by : ................................</p>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-success" ng-click="printQuotation()">Print Quotation</button>
<button class="btn btn-info" ng-click="downloadQuotation()">Download Quotation</button>
<a class="btn btn-warning" href="#/quotation/add">Create New Quotation</a>
<a class="btn btn-primary" href="#/quotation/view">Back to View All</a>
檢查DIV以下。我需要將該div內的所有內容轉換爲PDF。
<div class="row" ba-panel id="printQuotation">
有什麼建議嗎？請提供一個示例代碼或類似的東西。真的堅持了一段時間，根本沒有解決辦法。
你試過PDFKit嗎？不要依賴於客戶端的PDF生成。從服務器端執行它 – harish2704
我試過兄弟。不好。我只是舉了一些例子。你可以給我一個更好的一個PLZ。 –
@ harish2704還有可能從服務器獲取數據並將其顯示爲PDFKit中的表格？我需要創建/生成完整的發票。那可能嗎 ？ –