Display PDF in Angular2

Asked Jan 18 '17 at 05:06

Active Jan 18 '17 at 05:06

Viewed 723 times

I am trying to display a PDF file in an Angular2 component. The path of that PDF is dynamic and changes with the selection of the user.

Simply using data binding doesn't work:

<embed style="width: 100%; height: 100%" id="pdfDisplay" [src]="mailing.pdf" type="application/pdf"/>

The src attribute will have the correct value but the PDF is not rendered - at least not in Chrome. As far as I know, this is due to the fact that the browser doesn't update if only the attribute changes.
In a non-angular application I got it to work by removing the embed tag completely and adding a new one.

Question: How to do that in Angular2?

asked Jan 18 '17 at 05:06

Daniel Hilgarth

171,043
40
335
443

Maybe try forcing a re-render? See http://stackoverflow.com/questions/35105374/how-to-force-a-components-re-rendering-in-angular-2 – moof2k Jan 18 '17 at 05:26
@moof2k: Well, the change is detected but angular simply updates the src attribute. It doesn't remove the whole embed element and adds a new one. – Daniel Hilgarth Jan 18 '17 at 05:34
I've never tried this myself, but googling it around it appears people have had better luck embeding pdfs using iframes.. have you tried that? – moof2k Jan 18 '17 at 05:40
Sure. It just triggers a download for me. – Daniel Hilgarth Jan 18 '17 at 05:43
looks like security issue for me, could you make a stackblitz for it? – Stepan Suvorov May 01 '19 at 09:48

Display PDF in Angular2

0 Answers0