PDFs with alternating pages sizes lead to larger pages overlapping viewer bounds

[dwatsp]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [x] Feature request
- [x] Documentation issue or request

Not sure if I'm just too stupid to understand the possibilities with ng2pdfviewer...

Hi, we're using the viewer to display PDFs and would like to provide a tight space on the screen. Lets say 40% of vw in a flowing layout (sidebar left - sidebar right, pdf viewer in the middle)

My Problem is that while the viewer takes the provided dimensions and renders an as big as possible page canvas list, it is seemingly only using the first page to determine the scale factor. If subsequent pages are bigger, they blow the bounds

in my image we're having 9 A4 portrait 1/sqr(2) pages followed by one landscape sqr(2)/1 page. You can clearly see, it starts a little bit more to the left, but continues going on to the right until its width is met.

in this minimal setup, I'm using the following in my .html (40% is determined by our overlaying component):

<div *ngIf="src" style="width: 40%; height: 80vh"> <pdf-viewer [src]="src" style="width:100%; height:100%"></pdf-viewer></div>

(src is a 'safeUrl' ArrayBuffer)

same can be archived by going to the demo page https://vadimdez.github.io/ng2-pdf-viewer/ uploading the test file setting the width of <mat-drawer-content _ngcontent-gem-c46="" class="mat-drawer-content" style="margin-left: 320px;width: 40%;"> to 40% and forcing a rerender of the PDF (like by klicking the render text layer button)
testFile.pdf

You can fix this for this particular file by lowering zoom level to 0.9, and maybe you can resize the pdf like that, but I'd have to find a way to calculate the zoom Level dynamically. For that, I would need to know all scales of all pages, but the viewer stops rendering at page 2-6 (depending on ... luck? / maybe memory resources)

Auto Resize doesn't work.

<div *ngIf="src" style="width: 40%; height: 80vh"><pdf-viewer [src]="src" [autoresize]="true" [original-size]="false" style="width:100%; max-width:100%; height:100%"></pdf-viewer> </div>

Edit: so I got a programmatical solution after all pages have been rendered: I set an ng id to the bounding div, check if any canvas of the pageRendered event is larger than my current bounds and adjust zoom level accordingly

 <div *ngIf="src" #bound style="width: 40%; height: 80vh">
    <pdf-viewer [src]="src" [autoresize]="true" [original-size]="false" style="width:100%; height:100%"
    (page-rendered)="pr($event)"  [zoom]='zoom'></pdf-viewer>
 </div>

  public src;
  public widestWidth: number = 500;
  public zoom = 1;

  @ViewChild('bound') public bound: ElementRef<HTMLDivElement>; 

  constructor() { }

  public ngOnInit(): void {
    this.src = [setup...]
  }

  public pr(a) {
    if (this.widestWidth < a.source.canvas.width) this.widestWidth = a.source.canvas.width;
    if (this.widestWidth > this.bound.nativeElement.clientWidth) {
      const oldZoom = this.zoom;
      this.zoom = this.bound.nativeElement.clientWidth / this.widestWidth;
      this.widestWidth = this.bound.nativeElement.clientWidth;
      console.log('delta: ', oldZoom - this.zoom);
    }
  }
}

but this feels like a dirty solution, is there one where I get the page width immediately, not after the page has already been rendered?

[ftaffelt]

You can see/reproduce the same behaviour with your test document here:
https://mozilla.github.io/pdf.js/web/viewer.html

The viewer (the one implemented by pdfjs which is used by ng2-pdf-viewer) assumes equal sized pages derived from the size of the first page. If one of the following pages breaks out of this scheme you get overflows.

As the ng2-pdf-viewer is only a wrapper arround pdfjs library, you should maybe ask there for further support in your case.

[dwatsp]

Thank you, I feared that much but wanted to make sure that I didn't miss an output() or flag.