I can't print the full page when VuePdfComponent is mounted! (Maybe related with PDF.js)

[EspetoRx]

Hi! First of all, thanks for the great package.

I've installed the version 2.1.0 via NPM and tried to put the VuePdfApp inside a Bootstrap Modal, so users can read multiple PDF files downloaded from the server. It was working good until some user report the need to print the hole page that contains the Datatable they use to access the files. They like to make an kind of report with it.

Well, its just like this: When I trie to print the whole page once the component has no condition on it, the Print Server returns me "Warning: PDF is not fully loaded to be printed.".

And the console shows that the browser expects the print service to be initialized.

Once I started using v-if directive on the VuePdfApp component, I was able to get a window.print() or document.print() when Ctrl + P.

I am able to see the first opened document... But the next ones give me this errors and they are not shown on the component.

This is my vue component.

ModalPDFReader - Copia.txt

What do u recommend me to do?

And another thing: Can increment type="button" to the front end buttons so they can prevent page reload? Thanks!

[EspetoRx]

Hi!

Any solutions to this?

[sandanat]

Hi, in progress

[sandanat]

@EspetoRx:

1. Yes, you have to use v-if directive to make non-pdf pages printable. PDFjs internally creates printContainer and css rules for printing content only inside printContainer.
2. <link rel="resource" type="application/l10n" :href="wLocationHost+'/css/pt_br/viewer.properties'"> must be situated inside head tag according to HTML specification. You can use relative path <link rel="resource" type="application/l10n" href="/css/pt_br/viewer.properties'">. Errors in your console usually occur when <link rel="resource" type="application/l10n" is corrupted. You have to implement entire locale file even if you don't need all buttons. Please provide your /css/pt_br/viewer.properties.

3. And another thing: Can increment type="button" to the front end buttons so they can prevent page reload? Thanks!

I didn't understand what is needed. Do you need buttons of pdfjs to be of type button?

4. The most likely reason of the issue: vuePdfApp is rendered (based on enablePdfReader changed in transition enter) BEFORE a dialog is visible (which is rendered based on prop modalOpen). That is why offset parent is not set error may occur. Try to use v-if="modalOpen" for vuePdfApp. If it doesn't help (I think it will help) try to use v-if="eneblePdfReader' with watcher:

   watch: {
   modalOpen: async function () {
     // to make a dialog rendered in DOM
     await this.$nextTick();
     if (this.modalOpen == true) {
       this.enablePdfReader = true;
     }
   },
   },

This would be great if you provide a working example with the issue. Regards!

[EspetoRx]

Hi!

Since I just needed a PDF Viewer I changed the vue-pdf-app to a HTML 5 object tag...

Thanks for the response and the great package.

Keep the greatness!

[EspetoRx]

I did a CodeSandbox and it worked pretty fine for links on the internet...

https://codesandbox.io/s/bold-darkness-tfbpp?file=/src/main.js

Maybe is the way I download the PDF files from server and create the links... Their link are shown as ['blob']https://.... Maybe is this, cause the way you provided worked pretty well...

[EspetoRx]

I discovered what was causing trouble with my file openings and it wasn't the blob link. Was a SWAL 2 toast... I should do it before open the modal, and not after.

Living and learning. Feel free to use the CodeSandbox showing the package opening in modal on your readme.md.

And once again thanks for the great package. It worked like a brease.

[sandanat]

Thank you very much!

[EspetoRx]

No, its me who have to thank you for the great package. Thank you so much.

[EspetoRx]

Hi! I'm back again. I'm sorry to comment here after closed but it was the localization file... I didn't realized that it was missing. When i put it back those errors started again. I wasn't able to reproduce it on CodeSandbox. It might be the way I download the files... Anyway... Is there another way I can localize the pdf reader?

[sandanat]

Hi!

It might be the way I download the files.

It might be but it is unlikely. Remove pdf prop for vuePdfApp just to check if it works and exclude a way of file downloading resulting the error.

Move link tag with locale inside head tag. Provide your locale file. Provide source code of parent component for component from your initial example.

You can build your own toolbar using this example.Localization is not needed in that case