Print Button opens dialog with only last page. Other pages are omitted

[ravikumarbggit]

Print Button opens dialog with only last page. Other pages are omitted.

<ngx-extended-pdf-viewer *ngIf="pdfGenerated" 
        [src]="pdfData" 
        useBrowserLocale="false" 
        height="80vh"
        delayFirstView="2000"
        [showFindButton]="false"
        [showOpenFileButton]="false"
        [showBookmarkButton]="false"
        [showSecondaryToolbarButton]="true"
        [showZoomButtons]="false"
        [showSidebarButton]="false"
        [showPresentationModeButton]="false"
        [showHandToolButton]="false"
        [filenameForDownload]="filenameForDownload"
        [showPagingButtons]="false"
        mobileFriendlyZoom="150%"
        toolbarWidth="75%"
        [showPrintButton]="true" 
        ></ngx-extended-pdf-viewer>

Version info
"ngx-extended-pdf-viewer": "^1.5.2",

• Browser chrome
  Version 76.0.3809.132 (Official Build) (64-bit)

Work around:
Save the pdf file and give print externally

[stephanrauh]

Can you send me a simple reproducer? I'm already chasing this bug since a long time and I'm clueless. The bug simply doesn't happen on my machine.

BTW, I'm pretty sure you can drop the delayFirstView setting. I invented it because it took some time to understand the pdf.js API. Now I'm using it the way it's intended to be used, so there's no need to add an extra delay.

[ravikumarbggit]

Unfortunately I couldn't reproduce it myself in a new simple project. I suspected jsPdf and jsPdf Autotable might have caused this so I added them to new project too but still it worked!

Please don't close this issue for a week, I'll see how my existing project is different and giving this trouble.

btw, Nice library and many thanks for providing this!

[ravikumarbggit]

I found one more interesting bit. If I add pdf viewer to a normal component, it works well however in my project I'm using Angular material dialog component to render pdf preview which is causing incorrect print. When I checked in Firefox, It is showing "Preparing document for printing..." to 100% but not closing this toast.

Note:, I still cannot reproduce with my sample code even with material dialog :(

[stephanrauh]

Sometimes these issues are caused by the overflow-y settings. Frequently, it makes sense to display only a part of the page on the display. But this has unexpected side-effects when printing, because the same settings apply to printing.

[stephanrauh]

@ravikumarbggit Any progress? I'm reluctant to close issues that clearly exist, but npm punishes projects that solve issues slowly, so I don't want to wait forever...

[ravikumarbggit]

@stephanrauh , no luck reproducing it. I have created my own custom buttons for download and print (iframe contentWindow print) in project. Thanks for your response.

[pedrojrivera]

@stephanrauh For what its worth ... I had a similar issue when displaying a dialog box in material while displaying a pdf document and the printing did not work. Even with the @media print{} overrides it didn't fix it.

What I discovered is that in some instances material dialog boxes adds a cdk-global-scrollblock to the class attribute in the html directive. The class implements the override-y which breaks the printing while a dialog is open and trying to print.

I had to add a global style override to fix the problem with dialogs.

html.cdk-global-scrollblock {
  width: initial;
  position: initial;
  overflow-y: initial;
}

[stephanrauh]

@pedrojrivera Sounds great (and matches what I read at angular/components#2481 (comment)). Before implementing the feature, I'd like to ask if we can guard the CSS code with a media query?

@media print {
  html.cdk-global-scrollblock {
    width: initial;
    position: initial;
    overflow-y: initial;
  }
}

[stephanrauh]

I've managed to reproduce your bug... well, sort of. In my case, the PDF viewer prints the first page (as opposed to printing the last page, as the title indicates). However, your bug fix, @pedrojrivera , repairs me bug. I hope it also fixes your bug, even though I've modified it by wrapping it in a media query.

@ravikumarbggit , @pedrojrivera , and everybody reading this ticket: I'd like to hear from you. Does ngx-extended-pdf-viewer 1.7.1 solve your bug? I'm closing this ticket, but I'm still listening to this channel.

Enjoy!
Stephan

[pedrojrivera]

@stephanrauh I tested the latest change using your media query fix. I removed the the css fixes I had and just installed the latest v1.7.1 and everything seems to work well. Thanks!

[stephanrauh]

I've went over the print CSS again. Brace yourself for breaking changes when you update to version 9.0.0. I believe I've covered your use-case, but it's hard to tell in advance.