I created an ERP like system using Node.JS as backend and AngularJS as frontend. I need to print an invoice. So I need to download invoice as PDF. I have designed the whole Invoice with nice formatting with bootstrap CSS. And I got a solution to print that. Here's that code.
我创建了一个类似ERP的系统,使用Node.JS作为后端,AngularJS作为前端。我需要打印发票。所以我需要以PDF格式下载发票。我使用bootstrap CSS设计了整个Invoice的格式很好。我得到了打印的解决方案。这是代码。
$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");
}
});
};
I am using 'html2canvas' and also pdfMake to generate this PDF. And 'printQuotation' is the div name of that HTML Invoice. There's an item table loading with dynamic data and some other information. Just a normal invoice.
我使用'html2canvas'和pdfMake来生成这个PDF。 'printQuotation'是该HTML发票的div名称。有一个项目表加载动态数据和一些其他信息。只是一张普通发票。
This solution works fine sometimes. But when display size changes, I only get a blank PDF. Problem is if the invoice is not fit to display on the user's machine(laptop), we get a blank PDF. So please help me with this.
此解决方案有时很好。但是当显示尺寸发生变化时,我只得到一张空白的PDF。问题是如果发票不适合在用户的机器(笔记本电脑)上显示,我们会得到一张空白的PDF。所以请帮助我。
I don't need this way actually. Any solution. Client side or server side. My server is NodeJs and I saw many solutions and tried. But not working for me. This is the HTML page I need to convert to 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>
Check the div following. I need to convert all the content inside that div to PDF.
检查以下div。我需要将div中的所有内容转换为PDF。
<div class="row" ba-panel id="printQuotation">
Any suggestions? Please provide a sample code or something like that. Really stuck in this for a while and no solution at all.
有什么建议么?请提供示例代码或类似的代码。真的坚持了一段时间,根本没有解决方案。
1 个解决方案
#1
1
I've made a prototype on GitHub for you, which you can find here: https://github.com/Geexteam/proto-node-pdf
我已经为你在GitHub上制作了一个原型,你可以在这里找到:https://github.com/Geexteam/proto-node-pdf
It uses packages: html-pdf and handlebars as a basis.
Good luck!
它使用包:html-pdf和把手作为基础。祝你好运!
#1
1
I've made a prototype on GitHub for you, which you can find here: https://github.com/Geexteam/proto-node-pdf
我已经为你在GitHub上制作了一个原型,你可以在这里找到:https://github.com/Geexteam/proto-node-pdf
It uses packages: html-pdf and handlebars as a basis.
Good luck!
它使用包:html-pdf和把手作为基础。祝你好运!