Printing multiple QR codes in Ionic Angular

Issue

I have a webpage in Ionic that uses qr-code to generate QR codes. The codes come from the NodeJS end-point and I generate the codes in frontend in Ionic app accordingly. So far I can easily generate the QR codes and print them individually.

HTML

<div class="ion-text-center">              
    <div id="div_codes">
        <canvas *ngFor="let c of codes" [attr.id]="'div_' + c.code"></canvas>
            <div>
                  <ion-button (click)="print(c.code)">
                    <ion-icon name="print"></ion-icon>
                  </ion-button>
            </div>
    </div>

The print is straightforward using dom-to-image

print(code: string) {
    var node = document.getElementById(`div_${code}`);
    domtoimage.toPng(node)
      .then(function (dataUrl) {
        var popup = window.open();
        popup.document.write('<img src=' + dataUrl + '>');
        popup.document.close();
        popup.focus();
        popup.print();
        popup.close();
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error);
      });
  }

From my NodeJs endpoint I get could upto 10,000 codes with paging enabled. So that's taken care of.

I want to print all qr codes from the endpoint irrrespective of the paging. What are the options I could have? Like printAll button would fetch all the codes from the end-point and send them to the printer.

Solution

Finally, I found a solution for this. Instead of printing 10,000 times from the front end (angular app), I managed to do it from the backend (nodejs). In Nodejs I am converting all QR codes to stream (buffer) and then adding that buffer into excel sheet (exceljs). So I could have all those codes in one excel sheet and then I am printing the excel sheet.

Answered By - ARH