-
-
Notifications
You must be signed in to change notification settings - Fork 406
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fit PDF with height of the container #493
Comments
You have to configure your |
After a lot of efforts and a
In html file:
In your component file:
That's it. Please note, you will notice a flicker or glitch when pdf is updated or browser screen is resized. It is because, Definitely, there are some other good approaches to do this. But, this is the only one, I have found after a search of months. |
Using @RahmatAliMalik5 solution unfortunately messes up the ability to zoom. As an extension of his answer, if you'd like to be able to use the zoom you can calculate initial zoom and set it on page render. In your html: <pdf-viewer
[show-all]="false"
[autoresize]="true"
[original-size]="true"
[fit-to-page]="true"
[render-text]="false"
[page]="page$ | async"
[zoom]="zoom$ | async"
(page-rendered)="pageRendered($event)"
[src]="src"
></pdf-viewer> In your component: pageRendered(ev) {
if (this.initialZoomSet) {
return;
}
this.initialZoomSet = true;
const width = ev.source.div.clientWidth;
const height = ev.source.div.clientHeight;
const ratio = width / height;
const targetHeight = 384;
const requiredWidth = ratio * targetHeight;
const scale = requiredWidth / width;
this.setState('zoom', scale);
} I use the |
@RahmatAliMalik5 . Can you suggest a way to hide it for a while and show after it loads. Please |
@arunkg16021986 I worked on that project year before and now have no idea, how I have done it before. I think the preferred way will be to use a Your Component:
Your HTML:
============================================== I have set the |
|
I've solved the "blinking" by doing (inside the pageRendered() {
this.pdfComponent.pdfViewer.currentScaleValue = 'page-fit';
this.pdfComponent.zoomScale='page-fit';
} Neither option works on its own, for whatever reason you need both. This solves the "blinking" issue when changing source, when switching page and when resizing. |
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 getpage-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
fromZoom
option dropdown in PDFJS official example (link to example):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:
Let me know how can I show full page with complete height in that 300px container.
The text was updated successfully, but these errors were encountered: