Embed pdf in Angular2 component

Question

In angular 4.3 I want to open a modal popup and show an embedded pdf file, like shown here: https://pdfobject.com/static.html

I used the modal popup component from this answer which pops up nicely. My test html for the modal looks like this:

<a class="btn btn-default" (click)="setContent();modal.show()">Show</a>
<app-modal #modal>
  <div class="app-modal-header">
    Testing pdf embedding
  </div>
  <div class="app-modal-body">
    <div class="embed-responsive" *ngIf="ContentUrl">
      <object [attr.data]="ContentUrl"
              type="application/pdf"
              class="embed-responsive-item">
        <embed [attr.src]="ContentUrl"
               type="application/pdf" />
      </object>
    </div>
    <p><a [href]="ContentUrl">PDF Download</a></p>
  </div>
  <div class="app-modal-footer">
    <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
  </div>
</app-modal>

In my component I set ContentUrl like this:

public ContentUrl: SafeUrl;
public setContent() {
    this.ContentUrl = this._sanitizer.bypassSecurityTrustResourceUrl("/img/test.pdf");
}

The popup opens nicely, but it does not show the embedded pdf. It does not even try to load the url from the service. The download link works nicely and asks if the pdf should be saved to disc or opened.
I tried to embed the pdf outside of the popup to no avail, too.
I tried Chrome, Edge and IE. None displays the embedded pdf.

So how do I show/embed a pdf in an angular component?

score 7 · Accepted Answer · answered Aug 23 '17 at 14:52

7

I ended up creating the object using innerHtml.

In the template:

<div *ngIf="innerHtml"
  [innerHTML]="innerHtml">
</div>

In the code behind:

public innerHtml: SafeHtml;
public setInnerHtml(pdfurl: string) {
    this.innerHtml = this._sanitizer.bypassSecurityTrustHtml(
        "<object data='" + pdfurl + "' type='application/pdf' class='embed-responsive-item'>" +
        "Object " + pdfurl + " failed" +
        "</object>");
}

This way the object already has it's data attribute set upon creation. At least now the PDF is embedded like I wanted to.

answered Aug 23 '17 at 14:52

Sam

28,421
49
167
247

is it okay to bypass sanitizer if we know that the html we are injecting is fine? – Aiguo Apr 05 '18 at 22:33
Aiguo, I don't understand your question or your implications. – Sam Apr 06 '18 at 18:37
what I'm referring to is that you are using "this._sanitizer.bypassSecurityTrustHtml.." to inject object html into the view. So I'm just concerned and curious about by passing the sanitizer. – Aiguo Apr 24 '18 at 16:12
Ah, ok. Every part of the html is created by the program, even the pdfurl. No user input is used for creating the html. So I see no reason to clean the html up. This would be different if user entered data was used in the html, of course. – Sam Apr 25 '18 at 16:33
I am still getting this error `Refused to display 'MYFULLLINK' in a frame because it set 'X-Frame-Options' to 'deny` – Zohab Ali Mar 27 '20 at 17:47

score 1 · Answer 2 · answered Dec 31 '20 at 09:53

this code worked for me in angular 9

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'

public innerHtml: any;

constructor(
private domSanitizer: DomSanitizer
) { }

const fileURL = URL.createObjectURL(result);

  this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(
    "<object data='" + fileURL + "' type='application/pdf' class='embed-responsive-item'>" +
    "Object " + fileURL + " failed" +
    "</object>");

image

Embed pdf in Angular2 component

2 Answers2