CODEWITHSUNDEEP
angulariframe
JRS
JRS

Reputation: 773

Angular 8 - how to dynamically set iframe src to a pdf

In a component of my Angular 8 project, I have this method, which works perfectly to open a PDF report in a new tab:

public getReport() {
    if (this.userForm.valid) {
      this.applyFormData();
      // open before ajax call to pass browser security
      let windowRef = window.open('about:blank', '_blank');
      this._dataSvc.getDocument("LaborLevel/GetReport", this.reportParmsDto, (pdfFile: Blob) => {
        if (pdfFile) {
          let fileURL = URL.createObjectURL(pdfFile);
          windowRef.location.href = fileURL;
        } else {
          windowRef.close();
        }
      });
    }
  }

However, I want to display the same document within an iframe hosted in the control, rather than opening a new tab. So, I have an iframe defined in my component like this:

<iframe id="iframe" #iframe width="400" height="500" [src]="dataLocalUrl" type="application/pdf" *ngIf="dataLocalUrl"></iframe>

And I created this method to set the content of the iframe to be the PDF document:

public getReport() {
    if (this.userForm.valid) {
      this.applyFormData();
      this._dataSvc.getDocument("LaborLevel/GetReport", this.reportParmsDto, (pdfFile: Blob) => {
        if (pdfFile) {
           let objUrl = URL.createObjectURL(pdfFile);
           this.dataLocalUrl = this._sanitizer.bypassSecurityTrustResourceUrl(objUrl);
        } 
      });
    }
  }

However, when I do this, nothing at all displays in the iframe. I don't get any kind of error messages, but it is just empty (all white).

I have reviewed a number of articles which suggest that what I'm doing should work (including Angular 2 how to display .pdf file), but it's not working.

Note: If I hard code the URL of some web site, i.e., like this: 

this.dataLocalUrl = this._sanitizer.bypassSecurityTrustResourceUrl("https://theuselessweb.com/");

It works fine.

And if I take the objUrl ("blob:https://localhost:44303/1e820772-0df8-44c0-9416-96f560a8fc74") and paste it into the location bar of a new tab of my browser, the report displays just fine.

Why is my blob not working in the iframe???

Thanks for any assistance!

Upvotes: 0

Views: 3388

Answers (1)

Danielle
Danielle

Reputation: 1496

I had this problem before. In your case, dataLocalUrl exists when you load the iframe (even with no content). What I did in my case is to force the iframe to refresh its content after asigning a URL to the variable (dataLocalUrl in your case) and it worked perfect for me. I will try to find the project and paste the code for you.

Upvotes: 1

Related Questions