Full page scroll pdf viewer does not render next pdf pages

[MikeDabrowski]

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
- [ ] Feature request
- [ ] Documentation issue or request

I wanted to upgrade from v6 to v9, but the changes to make pdf-viewer-container position: absolute are stopping me from doing so. I render whole pdf on the page and rely on full page scrollbar to navigate. My pdf-viewer has height:100% and parent containers as well, up until body.

The new version loads first 2 pages and the rest is 'loading' and waits for the scroll to trigger the render. I used [show-all]="true" but it just puts the other pages as 'loading' and doing anything to the absolute container breaks the loading trigger. I tried removing overflow or even calculating height and binding it to the pdf-viewer component. No luck. It would be nice to mention such behavior in the docs.

Im happy to provide more details but at this point have no idea what more can help.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[GeorgeTailor]

same problem here, are there any solutions to this? @VadimDez

[naveedaheer]

IS THERE ANY SOLUTION FOR THIS, having same issue @VadimDez

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Brian-Hofmann]

+1

I want to have control of the scroll because I have absolute placed elements on the screen which need to scroll as the PDF scroll. With the PDF element controlling the scroll, the elements stay where they are as the PDF scrolls. I have a container surrounding the pdf element which takes care of overflow and handles my items. Have to revert to version 5.3.4 for now.

[MikeDabrowski]

We were forced to upgrade due to Angular16, and now have to find some workaround. @VadimDez any chance of this being prioritized ? only 3 pages are rendered

[Brian-Hofmann]

Any update on this?

[ProfEibe]

Same problem here. I need a simple "show all without scrollbars" to manage them myself..

[Brian-Hofmann]

If any of you all are just rendering the PDF and don't need all the extra features, I was able to use the underlying library "pdfjs-dist" and remove this library entirely. Essentially the library allows you to draw each PDF page into a canvas element. So in the ts file, you'd have something similar to this:

import * as pdfjsLib from 'pdfjs-dist/build/pdf.min'; 

pdfDocument: PDFDocumentProxy;

@ViewChild('container') public containerEl: ElementRef<HTMLDivElement>;
@ViewChildren('pdfPageCanvas') public canvasElements: QueryList<ElementRef<HTMLCanvasElement>>;

 ngOnInit(): void {
    this.retrieveResource();
  }

 ngAfterViewInit(): void {
    this.canvasElements.changes.subscribe(canvasPages => {
      canvasPages.forEach((canvasRef, i) => this.renderPDFPage(i + 1, canvasRef.nativeElement));
    });
  }

retrieveResource(): void {
    // Grabbing worker from CDN due to size (1mb)
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js';
    pdfjsLib.getDocument(yourPDFResourceURL).promise.then(pdf => (this.pdfDocument = pdf));
}

 renderPDFPage(pageNum: number, canvasEl: HTMLCanvasElement): void {
    this.pdfDocument.getPage(pageNum).then(pdfPage => {
      const context = canvasEl.getContext('2d');
      const containerRect = this.containerEl.nativeElement.getBoundingClientRect();
      const scale = containerRect.width / pdfPage.view[2];
      canvasEl.width = containerRect.width;
      const viewport = pdfPage.getViewport({ scale });
      canvasEl.height = pdfPage.view[3] * scale;
      pdfPage.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
        if (pageNum === this.pdfDocument.numPages) {
          this.renderingDocument = false;
        }
      });
    });
  }

Then in the template, you can have each canvas render a page:

   <!--This margin is set because of the ng-pdf-viewer default margin if needed-->
   <div #container style="height: 100%; margin: 1px 33px -8px 33px">
      <ng-container *ngIf="pdfDocument">
        <canvas #pdfPageCanvas *ngFor="let page of [].constructor(pdfDocument.numPages)"></canvas>
      </ng-container>
   </div>

[Couldosh]

Hi, I found a way to get rid off the scrollbars. I just add in my style.scss file, the root scss file of my project:

.ng2-pdf-viewer-container {
  overflow-x: inherit !important;
}

I don't know if it's a very good solution, tell me if you have any improvement

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.