0

my goal is to build a info screen, showing a PDF File and some detail information beside this.

The Idea is to have some screen with a Raspberry Pi running FullpageOS attached. FullpageOS boots the Pi and starts a chromium Browser in kiosk mode.

I builded a page showing the details plus a fixed PDF with Angular and it looked good on my FullpageOS test system. I displayed the PDF by using the embedded HTML Tag to call the buildin PDF renderer.

<embed src="./PDF/My.pdf#toolbar=0&navpanes=0&scrollbar=0&view=FitV" class="clientheight" width="100%" />

The problem occurs when I try to change the PDF dynamically. I use a sanitizer to get a save URL and bind the src to my Variable holding the save URL:

  <embed [src]="PdfURL" class="clientheight" width="100%" />

  private getSaveURL(url: string) {
    url += "#toolbar=0&navpanes=0&scrollbar=0&view=FitV";
    this.PdfURL = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

This code works on FireFox with the exception that the toolbar is not hidden but it fails on Chromium (and edge). The chromium browser simply shows noting until I move the Browser Window from one Screen to another. After I change the PdfUrl again nothing will happen even with moving of the Windows.

I’m looking for a way to make Chromium to refresh the PDF after I changed the PdfURL value.

jeb
  • 78,592
  • 17
  • 171
  • 225
copper spinner
  • 43
  • 6

1 Answers1

0

in this topic I found the hint to embedd the embedded tag into an object tag for better browser compatibility. So I tried it and it solved the probrem. Changing my html code to:

<object [data]="PdfURL" type="application/pdf" class="clientheight" width="100%">
    <embed [src]="PdfURL" type="application/pdf"/>
</object>

does the trick.

copper spinner
  • 43
  • 6