Can't loop through and dynamically export as PDF

[Jake]

I have the following pdf-export-component: 

<div class="hidden-export">
  <kendo-pdf-export #pdf paperSize="A4" [margin]="margins" [scale]="scale">
    <div *ngIf="printInvoice">
      <app-printinvoice [invoice]="printInvoice"></app-printinvoice>
    </div>
  </kendo-pdf-export>
</div>

where hidden-export just renders off the screen and app-printinvoice is a simple component that renders the provide invoice  I also have a grid of invoices with selectablerows and this button:

<button kendoButton [disabled]="selectedInvoiceNums.length === 0" (click)="emailInvoices(pdf)">Email Invoice</button>

which fires this method:

emailInvoices(pdfComponent: PDFExportComponent) {
    for (let invoice of this.selectedInvoices) {
      if (!invoice.email) {
        this.toasterService.warning(`${invoice.co} does not have an email.`, 'Email Missing');
        this.removeChangedInvoice(invoice.invoiceNumber);
      }
      else {
        this.printInvoice = invoice;
        pdfComponent.saveAs(`${this.printInvoice.co}.pdf`);
        pdfComponent.export().then((group: Group) => 
          exportPDF(group)).then((dataUri: string) => {
            const base64 = dataUri.split(';base64,')[1];
            this.invoiceService.emailInvoice(this.printInvoice!.invoiceNumber, base64).pipe(takeUntil(this.destroyed$)).subscribe(result => {
              if (!result.success)
                this.toasterService.error(`Failed to email invoice for ${invoice.co}: ${result.message}`, 'Email Error');
            });
          });
      }
    }
  }

 

these are rendering blank PDF's though it is setting the name of the pdf correctly so I know it is successfully changing printInvoice.  If I set printInvoice to the first Invoice of the grid on initialization then it will save that Invoice object every time through the for loop though with different names.  I can't figure out what I am missing.

[Yanmario]

Hi Jake,

From the provided code I  am not certain what could be the cause of the experience issue. I am also not certain that I understand the end result of what needs to happen from the export function. Could you possibly provide me with a runnable example and additional details on what needs to happen when the export function executes? That will help me better understand the configuration and try to provide further feedback on this case.

Thank you in advance for your cooperation.

Regards,
Yanmario
Progress Telerik     

[Jake]

Yanmario,

I was able to get it working though I am not particularly thrilled with the solution.  I don't think it is a telerik/kendo issue so much as it is an Angular / async issue.  To make it work I had to add a call to:

this.changeDetectorRef.detectChanges();

after setting the printInvoice and I then had to add this:

await timer(1000);

at the end of the for loop where timer is just:

const timer = (ms: number) => new Promise(res => setTimeout(res, ms));

Basically when the export function runs I need to pass the pdf data as a base64 encoded string to a web service which then attaches the pdf and sends it via email.  I need to do this for every selected item in the grid.  I may be able to put together a runnable example later but the basic use case is for every row selected in a grid (or really any collection of objects) create a pdf as a base64 encoded string and send it to a back end web service.  I had no issues getting a single PDF to export and even to create a single PDF as a base64 string but when attempting to loop through a collection of objects and do it that is where it became more difficult.

[Yanmario]

Hi Jake,

I am happy that you were able to resolve the issue. Indeed it might be related to Angular async operations and if you found a proper workaround it should be used in such a case.

Thank you for the information as it might be useful for other Kendo UI for Angular users.

Regards,
Yanmario
Progress Telerik