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

user_8823023 0
Viewed 14487

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):

example of required situation

Here is what I have got right now: enter image description here

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

angular8 angular pdf
3 Answers

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

user_88230230

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".

user_8945320

Another approach which not the best one to fix my issue, as the others not working with me.

1- You need to get notified when rendering of the pdf is done

<pdf-viewer
.....
 (page-rendered)="pageIsRendered()>
</pdf-viewer>

2- You need to select the element with the class 'ng2-pdf-viewer-container' And change style.

3- Apply the style 'display:contents' on the selected element when pdf is rendered.

Like that:

pageIsRendered() {
    this.elementRef.nativeElement.getElementsByClassName('ng2-pdf-viewer-container')[0].style.display = 'contents';
}

No other solutions worked for me, After a long search, I've fixed it in this way.

user_57583160
Related