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'を使用していますが、pdfMakeを使用してこのPDFを生成しています。そして '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次のことを確認してください。私はそのdiv内のすべてのコンテンツをPDFに変換する必要があります。
<div class="row" ba-panel id="printQuotation">
サンプルコードなどを提供してください。これはしばらくの間、全く解決していません。
PDFKitを試しましたか？ PDF生成のためにクライアントサイドには依存しないでください。サーバー側からしてください – harish2704
私は仲間にしました。いいえ。私はちょうどいくつかの例を続けた。あなたは私にもっと良いPLZを送ることができますか？ –
@ harish2704また、サーバーからデータを取り込み、PDFKitのテーブルとして表示することも可能ですか？私はフルインボイスを作成/生成する必要があります。それは可能ですか？ –