Fit PDF with height of the container

See original GitHub issue

I am trying to fit the PDF within the height of the container from weeks without any luck. Have tried to use fit-to-page with other settings as per suggested in the documentation. I have googled a lot, used the core PDFJS extension in my application to get page-fit work, but got nothing.

I have opened question at StackOverflow. It is not yet answered.

I would like to have very same config, like we can have by selecting Page Fit from Zoom option dropdown in PDFJS official example (link to example): example of required

I have used fit-to-page with certain other configs. But every time it fits with the width. I like to fit the PDF with the height, so whole PDF page can be viewed without scrolling in the container.

Here is what, I have got right now:

My code snippet is as follows:

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

              ></pdf-viewer>
           </div>

Let me know how can I show full page with complete height in that 300px container.

Issue Analytics

State:
Created 4 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

9reactions

RahmatAliMalik5commented, Jan 27, 2020

After a lot of efforts and a css clue from VadimDez, 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.

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;
}

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
}

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 other good approaches to do this. But, this is the only one, I have found after a search of months.

1reaction

RahmatAliMalik5commented, Dec 19, 2020

@arunkg16021986 I worked on that project year before and now have no, how I have done it before. I think the preferred way will be to use a boolean variable initialized by false and then use it on the pdf-viewer to hide and then show the pdf when rendered with page-fit style. Please check the example below, but please keep in mind, I have not tested this code. It is just to share in which way you should think to achieve it:

Your Component:

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


export class YourComponent {

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

  hidePdf = true;       // <----- here variable is initialized


  pageRendered() {
    this.pdfComponent.pdfViewer.currentScaleValue = 'page-fit';
   
    setTimeout(() => { hidePdf = false;  } , 100 ); // <----- here we are going to show pdf
  }
}

Your HTML:

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

            <pdf-viewer
            [hidden]="hidePdf"
            [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>

==============================================

I have set the hidePdf to true in setTimeout() because it will take some milliseconds to update the pdf to page-fit. You check it in your code if it works fine without setTimeout() or by increasing the time in setTimeout() to a bigger value.