* ng对于在Angular 6中使用jsPDF时不显示数据

问题描述 投票：1回答：3

我正在开发一个angular 6应用程序，我想在其中使用jsPDF从HTML创建PDF。以下是代码库：

HTML代码：

<div class="container mt-25">
<div class="row">
<div class="col-md-12">
<div id="generatePDF">
<mat-card>
<div class="row">
<div class="col-md-2">
<img [src]="clinic.clinicLogoPath || clinicDefaultLogo" class="hd-clinic-logo">
</div>

<div class="col-md-5 ml-minus-40">
<div class="row">
<h5>{{clinic.clinicName}}</h5>
</div>
<div class="row">
<small>
<i class="material-icons">
store
</i>&nbsp;
<span>
{{clinic.clinicAddress}}
</span>
</small>
</div>
</div>

<div class="col-md-5">

<div class="row">
<div class="col-md-12">
<h6 class="float-right">{{doctor.doctorName}}</h6>
</div>
</div>

<div class="row">
<div class="col-md-12">
<small class="float-right">
<i class="material-icons">
date_range
</i> &nbsp;
<span>
{{selectedDate | date:'fullDate'}}
</span>
</small>
</div>
</div>

<div class="row">
<div class="col-md-12 mt-minus-7">
<small class="float-right">
<i class="material-icons">
location_on
</i> &nbsp;
<span>
{{clinic.clinicLocality}}
</span>
</small>
</div>
</div>
</div>
</div>

<hr>

<div class="row">
<div class="col-md-12">
<h5 class="text-center">LIST OF BOOKED APPOINTMENTS</h5>
</div>

<div class="col-md-12 mt-10" *ngFor="let appointment of (appointments | orderBy:'appointmentTime')">
<div class="row">

<div class="col-md-1"></div>

<div class="col-md-2 mt-20">
<small>{{appointment.appointmentTime}}</small>
</div>

<div class="col-md-1 ml-minus-40">
<img [src]="appointment.patientProfileImage || patientDefaultImage" class="hd-patient-img">
</div>

<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<small>
<i class="material-icons">
airline_seat_individual_suite
</i> &nbsp;
<span>
{{appointment.patientName}}
</span> &nbsp;
<span>
( Age : {{appointment.patientAge}} )
</span>
</small>
</div>

<div class="col-md-12">
<small>
<i class="material-icons">
contact_phone
</i> &nbsp;
<span>
{{appointment.mobileNumber}}
</span>

<ng-template [ngIf]="appointment.patientLocation">
| <i class="material-icons">
location_on
</i>
<span>
{{appointment.patientLocation}}
</span>
</ng-template>
</small>
</div>

</div>
</div>
<div class="col-md-1"></div>
</div>
<hr>
</div>

</div>
</mat-card>
</div>
</div>
</div>
</div>

TypeScript（TS）代码：

constructor(
    private _datepipe: DatePipe,
    private content: ElementRef,
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document) { }

    ngAfterViewInit() {

    setTimeout(() => {

    let clinicLogo = new Image();
    if (this.clinic.clinicLogoPath) {
    clinicLogo.src = this.clinic.clinicLogoPath;
    } else {
    clinicLogo.src = this.clinicDefaultLogo;
    }

    html2canvas(document.querySelector('#generatePDF'), { logging: false }).then(canvas => {

    const imgData = canvas.toDataURL("image/jpeg", 1.0);
    const imgWidth = 210;
    const pageHeight = 295;
    const imgHeight = canvas.height * imgWidth / canvas.width;

    let pdf = new jspdf('p', 'mm', '[canvas.width, canvas.height]');
    let heightLeft = imgHeight;
    let position = 0;

    pdf.addImage(imgData, 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    // For multiple pages
    while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
    }

    //For Page Numbers
    this.footerFormatting(pdf);

    // Setting up meta-tag properties
    pdf.setProperties({
    title: 'Appointments for ' + this._datepipe.transform(this.selectedDate, 'fullDate')
    });

    const iframe = document.createElement('iframe');
    iframe.setAttribute('style', 'position:absolute;right:0; top:100%; bottom:0; height:100%; width:100%;');
    this.renderer.appendChild(this.content.nativeElement, iframe);
    pdf = this.addWatermark(pdf);
    iframe.src = pdf.output('dataurlstring');
    });

    }, 0);

    }

我面临的问题是* ngFor数据未显示在PDF中。其余所有插值数据均以PDF格式显示。

下面是图像以进一步说明：

  1. 需要转换为PDF的HTMLHTML that needs to be converted to PDF

  2. PDF生成PDF that is generated

如您所见，由于未显示* ngFor数据，因此我没有在PDF中获得确切的HTML内容。

提前感谢！

angular pdf jspdf
3个回答
0
投票
<button id="pdf">Generate</button>
<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
  </tbody>
</table>
0
投票
document.getElementById('pdf').onclick = function() {
  var doc = new jsPDF('p', 'pt');
  var res = doc.autoTableHtmlToJson(document.getElementById('table'));
  var height = doc.internal.pageSize.height;
  doc.text("text", 50, 50);
  doc.autoTable(res.columns, res.data, {
    startY: 200
  });
  doc.autoTable(res.columns, res.data, {
    startY: doc.autoTableEndPosY() + 50
  });
  doc.autoTable(res.columns, res.data, {
    startY: height,
    afterPageContent: function(data) {
      doc.setFontSize(20)
      doc.text("After page content", 50, height - data.settings.margin.bottom - 20);
    }
  });
  doc.save('table.pdf');
};
0
投票

Html2canvas仅捕获屏幕并仅转换为base 64图像。您必须尝试jspdf Autotable。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.