Printing does not fit PDF to page

[ferretwithaberet]

Configuration:

• Web browser and it`s version: Brave Version 1.25.68 Chromium: 91.0.4472.77 (Official Build) (64-bit)
• Operating system and it`s version: EndeavourOS Linux x86_64 Kernel 5.10.41-1-lts
• vue-pdf-app version: 2.0.0

Steps to reproduce the problem:

Not sure what causes it, I just got vue-pdf-app inside of a modal from Ant Design Vue. Might be related to this StackOverflow post.

What is the expected behavior?

While printing, PDF file should occupy the whole page.

What went wrong?

While printing, PDF file does not occupy the whole page (See screenshot below).

Attachments (screenshots, links, etc)

[sandanat]

Hi! Provide a pdf file please. Is it fine when you download it? Can you try in another browser?

[ferretwithaberet]

Is it fine when you download it?

Yes, it also looks normal in the viewer. Only while printing it looks odd.

Example print saved with cups-pdf: cups-pdf-job_4.pdf

Can you try in another browser?

Same with firefox.

Provide a pdf file please.

This is the pdf file from the screenshot above. Get_Started_With_Smallpdf.pdf

[ferretwithaberet]

Not sure if this helps, but it seems that scaling it to 150% almost fits it perfectly into the page.

Edit: Reworded

[sandanat]

Works fine in chrome, brave, firefox, IE on windows. Will check for linux. Can you provide source code?

[ferretwithaberet]

Works fine in chrome, brave, firefox, IE on windows. Will check for linux. Can you provide source code?

I cannot really, it is part of a work project. I am trying to recreate the issue in a codepen, if I can replicate it I will come here with a link to it.

[sandanat]

Thanks!

[ferretwithaberet]

I failed to reproduce it, I will try again when I have some free time, not sure when that will happen though.

[sandanat]

@ferretwithaberet, how do you attach pdf file to a package? Is it an array buffer? Your issue may be related to #66

[ferretwithaberet]

@ferretwithaberet, how do you attach pdf file to a package? Is it an array buffer? Your issue may be related to #66

It's an URL to a file hosted on an S3 server.

[bernardomoraisbh]

I'm also with this bug and I think I can share part of my code. Also when I show the pdf inside a modal one page override the previous page.

I'm using vue-js-modal and bootstrap vue package:

https://pastebin.com/kGkJQZvq

"dependencies": { "@fortawesome/fontawesome-free": "^5.15.3", "axios": "^0.21.4", "bootstrap": "^4.6.0", "bootstrap-vue": "^2.21.2", "core-js": "^3.6.4", "element-tiptap": "^1.26.2", "moment": "^2.29.1", "vue": "^2.6.14", "vue-froala-wysiwyg": "^4.0.5", "vue-js-modal": "^2.0.1", "vue-loading-overlay": "^3.0.1", "vue-pdf-app": "^2.1.0", "vue-router": "^3.5.1", "vue-search-select": "^2.9.3", "vue-sweetalert2": "^4.3.1", "vue-the-mask": "^0.11.1", "vue2-editor": "^2.10.3", "vuejs-overlay": "0.0.28", "vuex": "^3.6.2" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.2.0", "@vue/cli-plugin-eslint": "^4.2.0", "@vue/cli-service": "^4.2.0", "babel-eslint": "^10.0.3", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.1.2", "vue-template-compiler": "^2.6.11" },

[ferretwithaberet]

Also when I show the pdf inside a modal one page override the previous page.

This is because you can only have one vue-pdf-app on a page at any given time. You need to unmount the old one before mounting the new one. You can do this with a v-if directive.

[bernardomoraisbh]

But I already have only one vue-pdf-app and it's inside the modal. I use the v-if condition with the pdf url (base64).

[ferretwithaberet]

But I already have only one vue-pdf-app and it's inside the modal. I use the v-if condition with the pdf url (base64).

You mean you have only 1 modal in the code? Or do you have a v-for or something? Because a v-for generates multiple unique instances of the same component. Try force rerendering the content of the modal(Using a v-if for example).

[bernardomoraisbh]

I have the main template with a tag, inside this tag I calll some components one of them is the botton buttons where I can call the vue-pdf-app modal. If I have a PDF url I can show the modal, else the button is disabled. No v-for involved.

[sandanat]

I'm also with this bug and I think I can share part of my code. Also when I show the pdf inside a modal one page override the previous page.

I'm using vue-js-modal and bootstrap vue package:

https://pastebin.com/kGkJQZvq

"dependencies": { "@fortawesome/fontawesome-free": "^5.15.3", "axios": "^0.21.4", "bootstrap": "^4.6.0", "bootstrap-vue": "^2.21.2", "core-js": "^3.6.4", "element-tiptap": "^1.26.2", "moment": "^2.29.1", "vue": "^2.6.14", "vue-froala-wysiwyg": "^4.0.5", "vue-js-modal": "^2.0.1", "vue-loading-overlay": "^3.0.1", "vue-pdf-app": "^2.1.0", "vue-router": "^3.5.1", "vue-search-select": "^2.9.3", "vue-sweetalert2": "^4.3.1", "vue-the-mask": "^0.11.1", "vue2-editor": "^2.10.3", "vuejs-overlay": "0.0.28", "vuex": "^3.6.2" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.2.0", "@vue/cli-plugin-eslint": "^4.2.0", "@vue/cli-service": "^4.2.0", "babel-eslint": "^10.0.3", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.1.2", "vue-template-compiler": "^2.6.11" },

To fix pages overriding try to change box-sizing css property for div class="page"

[sandanat]

@bernardomoraisbh about printing:

1. open devtools in a separate window
2. print pdf
3. find div#printContainer in the devtools
4. check if printContainer is appended to the body tag
5. attach screenshots with css of img element inside printContainer and css of it`s parent container:

[faisalindrianto]

Hello, having the same issue here, it works fine on normal viewer, but does not fit the whole page on printing.

vue-pdf-app version 2.1.0 and Chrome version 94.0.4606.81 i'm also using https://github.com/webzlodimir/vue-bottom-sheet as modal

Preview :

PDF File : document.pdf

[dallasbeek]

This is kinda old but I discovered adding a css rule to override bootstrap print.css centered my print preview.

@media print {
    body {
        min-width: 768px !important;
    }
}