3
Node.JS를 백엔드로 사용하고 AngularJS를 프론트 엔드로 사용하여 ERP와 유사한 시스템을 만들었습니다. 인보이스를 인쇄해야합니다. 따라서 PDF로 인보이스를 다운로드해야합니다. 나는 부트 스트랩 CSS로 좋은 포맷으로 전체 인보이스를 디자인했다. 그리고 그것을 인쇄 할 해결책이 있습니다. 여기에 그 코드가 있습니다.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를 생성하려면 pdfMake를 사용하고 있습니다. 'printQuotation'은 해당 HTML 송장의 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 class="row" ba-panel id="printQuotation">
의견이 있으십니까? 샘플 코드 또는 그와 비슷한 것을 제공하십시오. 정말 잠시 동안이 문제에 갇혀 있고 전혀 해결책이 없습니다.
PDFKit을 사용해 보셨습니까 ?? 클라이언트 측에서 PDF 생성을하지 마십시오. 서버 측에서 해주세요 – harish2704
나는 형님을 시도했습니다. 좋지 않다. 방금 몇 가지 예를 따랐습니다. 좀 더 나은 PLZ를 보내 줄 수 있어요? –
@ harish2704 또한 서버에서 데이터를 가져 와서 PDFKit의 테이블로 표시 할 수 있습니까? 전체 인보이스를 생성/생성해야합니다. 그게 가능하니? –