Я занимаюсь разработкой углового приложения, в котором я хочу создать 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>
<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>
<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>
<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>
<span>
{{appointment.patientName}}
</span>
<span>
( Age : {{appointment.patientAge}} )
</span>
</small>
</div>
<div class="col-md-12">
<small>
<i class="material-icons">
contact_phone
</i>
<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.
Ниже приведены изображения для уточнения:
HTML, который необходимо преобразовать в PDF ![HTML that needs to be converted to PDF](https://i.stack.imgur.com/abxPx.png)
PDF, который создается ![PDF that is generated](https://i.stack.imgur.com/4rIPA.png)
Как видите, я не получаюточное содержание HTML в PDF как * ngДанные не отображаются.
Заранее спасибо !!