angular 9 pdf.output('dataurlnewwindow') is not working for chrome

Question

1. In angular 9 how to open html content in new tab in pdf format. I already completed the code using jspdf. But it is working only for mozilla and IE. Chrome blocking new tab. So tried in another way using Iframe. Then it is working for chrome also. But in my html content more design code need to include. After that when I tried blank page is coming in new tab. My code is like this.

   ngx-table-popup.component.html

<button mat-raised-button color="primary" class="mr-1" matTooltip="View PDF Format" (click)="captureScreen()">View PDF Format</button>

ngx-table-popup.component.ts

          ``` import jsPDF from 'jspdf'; 
              import html2canvas from 'html2canvas';
           /***********tried with  pdf.output('dataurlnewwindow') ,it is only    working with IE and mozilla***********************/   public
    captureScreen()      {  
           
            var data = document.getElementById('contentToConvert');
            
            html2canvas(data).then(canvas => {  
             
              var imgWidth = 208;   
              var pageHeight = 295;    
              var imgHeight = canvas.height * imgWidth / canvas.width;  
              var heightLeft = imgHeight;  
          
              const contentDataURL = canvas.toDataURL('image/png')  
              let pdf = new jsPDF('p', 'mm', 'a4'); // A4 size page of PDF  
              var position = 0;  
              pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
              
             pdf.output('dataurlnewwindow');
        
              
            });      } /*****************tried with  Iframe.Working only for less content.More html content like invoice report is not
    displaying    with iframe ********************************/
    dataString:string;
       
          public captureScreen()      {  
           
            var data = document.getElementById('contentToConvert');
            
            html2canvas(data).then(canvas => {  
             
              var imgWidth = 208;   
              var pageHeight = 295;    
              var imgHeight = canvas.height * imgWidth / canvas.width;  
              var heightLeft = imgHeight;  
          
              const contentDataURL = canvas.toDataURL('image/png')  
              let pdf = new jsPDF('p', 'mm', 'a4'); // A4 size page of PDF  
              var position = 0;  
              pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)  
              
             //pdf.output('dataurlnewwindow');
             this.dataString=pdf.output('datauristring');  this.debugBase64(this.dataString);
              
            });      }    debugBase64(base64URL){
            var win = window.open();
            win.document.write('<iframe type="application/pdf" src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; 
    bottom:0px; right:0px; width:100%; height:100%;"    allowfullscreen

></iframe>');  }

Answer 1

To open a report in the new window you can use the window object.

.// Here you just need to convert pdf to base64 string.
const reportpdf = btoa(pdf.output());

// pass it into the createObjectURL method
    if (reportpdf) {
      const blobURL = URL.createObjectURL(this.pdfBlobConversion(reportpdf, 'application/pdf'));
      window.open(blobURL);
    }
  
  // converts base64 to blob type for windows
  pdfBlobConversion(b64Data: string, contentType: string) {
    contentType = contentType || '';
    const sliceSize = 512;
    b64Data = b64Data.replace(/^[^,]+,/, '');
    b64Data = b64Data.replace(/\s/g, '');
    const byteCharacters = window.atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset = offset + sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);

      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }