pdf not being rendered in iFrame

Question

I was trying to display a pdf file on iFrame. From the api, I was getting byte[]. But when I get the response, I was trying to create a URL so that I want to display it in iFrame. But, I keep getting the following errors in browser console and it's not displaying anything on the window due to this.

Here is the error I am getting in browser console:

Following is my code which calls the api:

public getPdf$(Id: string): Observable<any> {
    let endpoint = this.appConfig.apiEndpoint + '/data/GetPdfContent?Id=' + Id;
    return this.http.get(endpoint, { responseType: 'blob' }).pipe(map((blbResponse: any) => {
            var blobData= new Blob([blbResponse], { type: 'application/pdf'});            
            var pdfURL = URL.createObjectURL(blobData);           
            return pdfURL;
        }
    ));
}

Code from componenet.ts file:

cols: any[];
    listInfo : any;
    displaypdf: boolean = false;
    safeURL : SafeResourceUrl; 
  constructor(private dataService :DataServicepublic sanitizer: DomSanitizer) { 
      
  }
  ngOnInit(): void {
      this.dataService.getListInfo$().subscribe(resp=>{
      this.listInfo = resp;
      this.cols = [
            { field: 'listName', header: 'Name' },
            { field: '', header: 'View'}
        ];
    });
  }
  onRowSelect(event){
      this.dataService.getPdf$(event.id).subscribe(resp=>{
      this.pdfData = resp;
      this.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfData);
    });
  }
closeWindow(){
      this.displaypdf = false;
  }

Code that passes the Id to the above onRowSelect event and displays the pdf in iFrame(Where the iFrame is not working. Not displaying the pdf file)

<div class="card">
    <h5></h5>
        <p-table [columns]="cols" selectionMode="single" [value]="data">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns">
                        <span *ngIf="col.header!=='View'">
                            {{col.header}}
                        </span>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns">
                <tr [pSelectableRow]="columns">
                    <td *ngFor="let col of columns">
                        <span *ngIf="col.header==='View'">
                        <button class="usa-button" pButton type="button" icon="pi pi-eye"  style="float: initial"  (click)="onRowSelect(rowData)"></button></span>
                        <span *ngIf="col.header!=='View'">{{rowData[col.field]}}</span>
                    </td>
                </tr>
            </ng-template>
        </p-table>
</div>
    <p-dialog class= "dialogPadding" header="View Pdf Data" [style]="{'width': '60vw'}" (onHide)="closeWindow()">
    <p-accordion>
        <p-accordionTab header="Pdf Data" [selected]="true">
                        <div>
                <iframe width="100%"  height="600px" [src]="safeURL" type="application/pdf"> </iframe>
                        </div>
        </p-accordionTab>
    </p-accordion>
    </p-dialog>

Can someone help me out where am I doing wrong? The pdf isn't loading on the window. Atleast I need a solution to display the pdf in a different window instead of iframe is also fine. All I need is, I want to display the pdf in browser.

Answer 1

I think it can solve your problem.

<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>