4

I was messing around with the ngx-extended-pdf-viewer and got a feel for what it does BUT I was curious as to whether it was flexible enough to let a user switch between pdf's?

As it stands this only shows one pdf but I was curious to if it was possible to switch to another pdf with different settings?

<ngx-extended-pdf-viewer
    [src]="'assets/BootsFaces_Deep_Dive_1.0.pdf'"
    backgroundColor="#e8e8ef"
    [mobileZoom]="mobileFriendlyZoom"
    [showZoomButtons]="true"
    [showSidebarButton]="showSidebar"
    [useBrowserLocale]="true"
    [showSidebarOnLoad]="true"
    [(zoom)]="zoom"
    [height]="height"
    [handTool]="handTool"
    [page]="page"
    [filenameForDownload]="filenameForDownload"
    (pagesLoaded)="onPagesLoaded($event)"
    [(spread)]="spread"
    [language]="language"
    [showPresentationModeButton]="true">
</ngx-extended-pdf-viewer>
Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
CJ84
  • 53
  • 1
  • 4

1 Answers1

3

ngx-extended-pdf-author here. Yeah, sure, <ngx-extended-pdf-viewer> can display multiple PDF files over time. The attribute [src] reacts to changes. I've published a showcase example: https://www.pdfviewer.net/multiple-documents

Actually, I've specifically created the library to display a plethora of PDF files during a long, long working shift without restarting the Angular client. I guess that's several hundred, more likely several thousand PDFs before closing the browser. Mind you, my original customer is still using an old version: in the mean time both the pdf.js team and I have managed to fix several memory leaks.

However, there are limits. It's not possible to display two PDF files on the same page. If you need that, you're better of with an iFrame solution, such as ng2-pdfjs-viewer. BTW, that's a fine library, too.

As for the "different settings" bit: every attribute I've documented with square brackets, such as [src] or [(page)], listens to changes. As soon as you change the pageNumber variable in your TypeScript code, the PDF viewer jumps that that page.

If you've still got questions or if you encounter bugs, don't hesitate to tell me.

Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
  • So in the example in your github where you have a seperate tool bar where the user can check and uncheck certain settings within the pdf viewer, how would the user be able to take that tool bar and instead of having it up top of the pdf, have it to the left of the pdf viewer? – CJ84 Jul 09 '19 at 17:07
  • Well... my demo uses the Angular Material tabs to switch between documents. Nothing stops you from putting the tabs on the left hand side of the PDF viewer. However, I don't think that's what you're asking for. Your question sounds like you'd like to modify the layout of the PDF viewer itself, and to inject your own UI widgets inside it. Did I get you right? – Stephan Rauh Oct 18 '19 at 19:50
  • hi, im trying to show mutiples documents in the same page, for that im doing it like https://www.pdfviewer.net/multiple-documents, but it doesnt change the document, if i download it, then download the right one, but in the viewer always shows the same, do i need to do something to force the view refresh?, thanks. – Alvaro Flores Mar 16 '20 at 23:57
  • Hi @StephanRauh Will this limitation of not being able to have two PDFs on the same page be fixed in future releases? or is it really a limitation and there will be no fix? – Jorge Rocha Jul 01 '21 at 16:46
  • 1
    @JorgeRocha I'm afraid displaying two PDF files is impossible. That's because the underlying library, pdf.js, pollutes the global namespace with global variables. However, if you're willing to put ngx-extended-pdf-viewer into an iFrame, you should be able to display two PDF files side-by-side. Actually, that's precisely what https://www.npmjs.com/package/ng2-pdfjs-viewer does. – Stephan Rauh Jul 02 '21 at 18:05
  • @AlvaroFlores All you need is uploading the new document. It's shown automatically. Maybe you've run into this bug: https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/814. Until last week, identical PDF files with different form data couldn't be distinguished. Updating to the latest version fixes this bug. BTW, it's better to open a bug ticket at https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/. That way, you'll get your answer faster. – Stephan Rauh Jul 02 '21 at 18:10
  • @CJ84 I just saw you were talking about custom toolbars. You can position them anywhere you need. It's just a matter of CSS magic. Vertical toolbars are possible, too. I've already seen people doing just that. – Stephan Rauh Jul 02 '21 at 18:12
  • @StephanRauh I have a list of document and they open a new tab when I click on them. I can't open 2 or more at at time without the pdf viewer failing and not displaying the pdf. Is this possible with pdf extended viewer? Same component in Angular is used in each tab – Siobhan Holubicka Dec 07 '21 at 09:29
  • 1
    If you're talking about browser tabs: maybe. Different browser tabs have separate global namespaces, so it should be possible. It's just a bit weird because it amounts to opening multiple instances of your Angular application. If you're talking about HTML tabs: no, that's not possible. Unless... well, there are two loopholes. Put the PDF viewer in an iFrame, and you should be able to display multiple PDF files. Likewise - and probably preferable - you can wrap the PDF viewer in a WebComponent. I didn't try either approach, but I have reason to believe they work. – Stephan Rauh Dec 08 '21 at 21:17