angular 9 pdf.output('dataurlnewwindow') 不适用于 chrome

Question

In angular 9 如何在新标签页中以 pdf 格式打开 html 内容。我已经使用 jspdf 完成了代码。但它只适用于 mozilla 和 IE。 Chrome 阻止新标签页。所以尝试使用 Iframe 的另一种方式。然后它也适用于 chrome。但是在我的 html 内容中需要包含更多的设计代码。之后，当我尝试在新标签页中出现空白页时。我的代码是这样的。

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;
  }

angular 9 pdf.output('dataurlnewwindow') 不适用于 chrome

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

pdf

jspdf

angular