* ngДанные, не отображаемые при использовании jsPDF в Angular 6 - PullRequest
0 голосов
/ 21 января 2019

Я занимаюсь разработкой углового приложения, в котором я хочу создать PDF из HTML, используя jsPDF.Ниже приводится кодовая база:

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. HTML, который необходимо преобразовать в PDF HTML that needs to be converted to PDF

  2. PDF, который создается PDF that is generated

Как видите, я не получаюточное содержание HTML в PDF как * ngДанные не отображаются.

Заранее спасибо !!

...