How the make PDF fit the height - ng2-pdf-viewer

Question

I am using ng2-pdf-viewer in my Angular 8 application.

I would like to show the PDF fit to the height of the container regardless of the width. So, PDF must take all of the height as we can do by selecting Page Fit from the zoom option in Mozilla's PDF (link here):

Here is what I have got right now:

My code for ng2-pdf-viewer is:

            <pdf-viewer
            [src]='"./assets/images/userFiles/" + file.fileName'
            [original-size]="false"
            [render-text]='false'
            [show-all]="false"
            style="display: block; height: 100%;"
            (after-load-complete)='afterLoadComplete($event)'
            (page-rendered)='pageRendered($event)'
            (pageChange)='pageChange($event)'

            ></pdf-viewer>

I have tried countless things for days to get this working. fit-to-page, giving height to all of the containers and much more.

Let me know, what is the best way to get it done

Solution 1

After a lot of efforts, I have found a way for making PDFs stretch to the height of container. I don't know whether it is good approach or not, but it is working great in my scenario.

1. Add following css in your main style.scss or style.css:

.ng2-pdf-viewer-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

2. Get ng2-pdf-viewer component into your component like this:

// other imports
import { PdfViewerComponent } from 'ng2-pdf-viewer';


export class YourComponent{

  @ViewChild(PdfViewerComponent, {static: false})
  private pdfComponent: PdfViewerComponent;

// other code
}

3. Then use (page-rendered) event function to edit the currentScaleValue of the pdfViewer. Please check code below: In html file:

<div style='position: relative; height: 100%;'>

            <pdf-viewer [src]='"./assets/images/userFiles/" + file.fileName'
            [show-all]="false"
            [autoresize]="true"
            [original-size]='true'
            [fit-to-page]='true'
            [render-text]='false'
            (page-rendered)="pageRendered()"
            ></pdf-viewer>
</div>

In your component file:

  // called after pdf page is rendered
  pageRendered() {
    this.pdfComponent.pdfViewer.currentScaleValue = 'page-fit';
  }

That's it. Please note, you will notice a flicker or glitch when pdf is updated or browser screen is resized. It is because, ng2-pdf-viewer changing the height according the it's settings and then when pdf page is rendered, we change it to the page-fit. I hide the pdf for a while when it updates and then show after it loads the settings to the page-fit.

Definitely, there are some good approaches to do this. But, this is the only one, I have found after a search of months.

Solution 2

Use [fit-to-page]="true" option to fit the PDF in the page.

<pdf-viewer
   [src]='"./assets/images/userFiles/" + file.fileName'
   [original-size]="false"
   [render-text]='false'
   [show-all]="false"
   style="display: block; height: 400px;"
   (after-load-complete)='afterLoadComplete($event)'
   (page-rendered)='pageRendered($event)'
   (pageChange)='pageChange($event)'
   [fit-to-page]="true">
</pdf-viewer>

It should work with combination of [original-size]="true".

Comments

[Rahmat Ali]

It does not work. I have used [original-size]="true" with [fit-to-page]="true"

[Sunil Garg]

now zoom property is not working, any solution for that?

[Rahmat Ali]

Yes, You can check the solution on Github here