如何使用AngularJS动态加载数据来生成PDF？

Question

我创建了一个ERP系统，使用Node.JS作为后端，AngularJS作为前端。我需要打印发票。所以我需要将发票下载为PDF。我用引导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"); 
      } 
     }); 
    }; 

我使用的是'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"> 

有什么建议吗？请提供一个示例代码或类似的东西。真的坚持了一段时间，根本没有解决办法。

Answer 1

我做了GitHub上的原型为你，你可以在这里找到： https://github.com/Geexteam/proto-node-pdf

它采用包：html-pdf和handlebars作为基础。
祝你好运！