You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
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
We've been having an issue with the PDF Viewer displaying extra blank pages in Chrome and Edge during the print preview. But it seems to work fine using Firefox.
They don't seem to be counted as part of the total pages as well.
Version info
"ngx-extended-pdf-viewer": "^14.0.4",
To Reproduce
I've attached a copy of a 2 page PDF that I've been using to test.
In Chrome/Edge, print preview is displaying extra blank pages not being counted after each page, for a total of 4 pages in the preview.
In Firefox, it shows correctly, no blank pages for a total of 2 pages.
Thanks for taking a look at this for us!
document.pdf
The text was updated successfully, but these errors were encountered:
stephanrauh self-assigned this Jun 21, 2022stephanrauh added bug Something isn't working Working on it I've started to work on this ticket. More often than not, that means the feature is delivered soon. labels Jun 21, 2022
stephanrauh commented Jun 21, 2022BTW: welcome to GitHub! Did you really join GitHub just to file this bug? I feel honored!
stephanrauh commented Jun 21, 2022I can't reproduce your bug on my machine using Chromium. So I'd like to ask you to examine your CSS code yourself. Here's how to do it:
Now the main window shows the images. You can examine the CSS rules until you find what's going on. Almost every active CSS rule should have a selector like @media print , [data-pdfjsprinting] , or #printContainer . The only exceptions are these rule of the tag:
Usually, it also helps to compare your CSS rules to the CSS rules of Mozilla's showcase https://mozilla.github.io/pdf.js/web/viewer.html. To set the breakpoint in their showcase, you need to open the file pdf_print_service.js . Now you can run a side-by-side comparison of the CSS rules.
stephanrauh commented Jun 21, 2022If you're still stuck, don't hesitate to tell me. When you manage to spot the bug, please tell me, too. I prefer to keep tickets open until I know you've solved the issue.
stephanrauh added Can't reproduce the bug You've reported a bug, but the feature works fine on my machine. So I don't know how to help you. waiting for the user's answer and removed Working on it I've started to work on this ticket. More often than not, that means the feature is delivered soon. labels Jun 21, 2022
Mcondino commented Jun 21, 2022Sounds good! I will first create a new project and test there, and if it doesn't happen, I will move on to your next suggestion! Thanks for the quick responses!
(And, yes I did create an account so that I could get assistance with this. :) )
Mcondino commented Jun 21, 2022So, It does work correctly in Chrome in a brand new project.
I'll follow the steps you listed and try to track down what's going on in our projects CSS.
So, from what I could find via Chrome:
This CSS style is what seems to be giving me issues. The Width specifically.
If I set that to 99%, close the print preview and re-open it, then it shows correctly.
I have not had any luck trying to set that manually on my side.
stephanrauh commented Jun 21, 2022Yeah, that rings a bell. Some time ago, a developer ran into the same issue and solved it by setting the width to 99.9%. The difference was small enough not to show in print, but the empty pages were gone.
I'm reluctant to always set the width to 99.9% because I'm sure that breaks other applications out there.
Mcondino commented Jun 21, 2022I've also ran across this one as well:
It only seems to work if I set it to 99%. 99.99% doesn't seem to be enough.
stephanrauh commented Jun 21, 2022So it's probably more than just one pixel spilling over :)
stephanrauh commented Jun 21, 2022 •I've found Mozilla's CSS. I'll stick to the 100% default because they do. But I suppose I should mention the workaround here: https://pdfviewer.net/extended-pdf-viewer/troubleshooting
#printContainer < display: none; > @media print < body < background: rgba(0, 0, 0, 0) none; > body[data-pdfjsprinting] #outerContainer < display: none; > body[data-pdfjsprinting] #printContainer < display: block; > #printContainer < height: 100%; > /* wrapper around (scaled) print canvas elements */ #printContainer > .printedPage < page-break-after: always; page-break-inside: avoid; /* The wrapper always cover the whole page. */ height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; > #printContainer > .xfaPrintedPage .xfaPage < position: absolute; > #printContainer > .xfaPrintedPage < page-break-after: always; page-break-inside: avoid; width: 100%; height: 100%; position: relative; > #printContainer > .printedPage canvas, #printContainer > .printedPage img < /* The intrinsic canvas / image size will make sure that we fit the page. */ max-width: 100%; max-height: 100%; direction: ltr; display: block; > >
