Not able to show PDF in a modal popup in angular, the PDF is extracted from ZIP, I am getting the zip in an API response

Question

I am trying to show PDF content in a modal popup from a zip file, Actually I am getting this zip(octet-stream) back as an API response and then I unzip it and try to show the pdf content, I am getting a blank popup. While I am able to see the PDF blob files (below link) in external tabs but not in modal popup. url: blob:http://localhost:4200/42510dg7-0h5b-5bbb-8ef3-90fec296affa Below is component.html code

this.dataService.getPdfFromZip(details).subscribe(
      data => {
        const zipBlob = new Blob([data], { type: 'application/zip' });
        const zip = new JSZip();
        zip.loadAsync(zipBlob).then((zipContent) => {
          const pdfPromises: Promise<Uint8Array>[] = [];
          this.pdfs = [];
          Object.keys(zipContent.files).forEach((filename) => {
            if (filename.endsWith('.pdf')) {
              const zipEntry = zipContent.files[filename];
              const pdfPromise = zipEntry.async('arraybuffer').then((pdfArrayBuffer) => {
                return new Uint8Array(pdfArrayBuffer);
              });
              pdfPromises.push(pdfPromise);
            }
          });

          Promise.all(pdfPromises).then((pdfUint8Arrays) => {
            Object.keys(zipContent.files).forEach((filename, index) => {
              if (filename.endsWith('.pdf')) {
                const zipEntry = zipContent.files[filename];
                this.pdfUint8Array = pdfUint8Arrays[index];
                const pdfBlob = new Blob([this.pdfUint8Array], { type: 'application/pdf' });
                var pdfUrl = URL.createObjectURL(pdfBlob);
               
              
                this.pdfs.push({ name: zipEntry.name, url: this.pdfUrl});
              }
            });


            if (this.pdfs.length > 0) {

              this.PaymentPrintPopup.show(); 
              this.activeTab = 0;
            }

          });
        });
      },
      error => {
        this.spinner.hide();
      }
<form #PaymentPrint="ngForm" novalidate>
    <div class="col-xl-4 col-md-6">
      <app-ui-modal #PaymentPrintPopup [dialogClass]="'modal-lg'" [containerClick]="false">
        <div class="app-modal-header">
          <a (click)="quickprint()" class="d-sm-block d-md-none d-lg-block">
            <i style="cursor: pointer; color:white" class="feather icon-printer">Quick Print</i>
          </a>
          <button type="button" class="close basic-close" data-dismiss="modal" aria-label="Close"
            (click)="closePaymentPrintPopup()"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="app-modal-body quick-print-modal-body" id="style-2">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" *ngFor="let pdf of pdfs; let i = index">
              <a class="nav-link" [class.active]="i === activeTab" (click)="selectTab(i)"
                 [ngStyle]="{'cursor': isHovered ? 'pointer' : 'default'}"
                 (mouseenter)="isHovered = true" (mouseleave)="isHovered = false">
                 {{ pdf.name }}
              </a>
            </li>
          </ul>
          <div class="tab-content">
          <div class="tab-pane" *ngFor="let pdf of pdfs; let i = index" [class.show]="i === activeTab">
            <pdf-viewer [src]="pdf.url" type="application/pdf" style="height: 600px" width="100%"  id="iframeContainer"> </pdf-viewer>
          </div>
        </div>
      </app-ui-modal>
    </div>
  </form>