0

I have an API which returns URL website String for a PDF Document. I want to display PDF as an embedded html in IFrame window, however its not working keeps downloading the document. How can this be resolved? Trying to modify the http headers

(this is within our network, so Iframe will function , no cross origin issues)

Trying to send the url string into my iframe component

After updates, its showing error: Failed to Load PDF Document.

API :

export class ImageRetrievalService {
  readonly baseUrl = `${environment.companyBaseUrl}/api/ImageRetrieval`;

  constructor(private http: HttpClient) { }

  getDocument(
    documentId: number
  ): Observable<string> {
    const url = `${this.baseUrl}/GetDocument/${documentId}/`;
    return this.http
      .get(url, { responseType: 'text' })
      .pipe(map((res) => res));
  }

IFrameComponent:

Testing it this as below,

<div class="iframe-two">
  <div class="box">
    <iframe title="iframe-box1" class="iframe-area" [src]="url1 | safe"> </iframe>
  </div>

<div class="box">
  <iframe title="iframe-box2" class="iframe-area" [src]="url2 | safe"></iframe>
  </div>
</div>

Attempted Solution:

Following is showing Error: blob:http://localhost:4200/fba3513e-3b82-4c48-ad14-94ceed896342

Failed to Load PDF Document.

  getDocument(
    documentId: number
  ) {
    const url = `${this.baseUrl}/GetDocument/${documentId}/`;
    return this.http
      .get<any>(url, { responseType: 'blob'  as 'json'})
      .pipe(map((res) => {

        const blobTest =  new Blob([res], { type: 'application/pdf' });
        const fileUrl = URL.createObjectURL(blobTest );
        return fileUrl;
      }));
    }
}

Resources:

Opening PDF file in new tab angular 4?

Angular2 Displaying PDF

0 Answers0