search

sandanat / vue-pdf-app

VUEjs v2 PDF viewer based on Mozilla's PDFJS
MIT License
221 stars 100 forks source link

Printing does not fit PDF to page #51

Open ferretwithaberet opened 3 years ago

ferretwithaberet commented 3 years ago

Configuration:

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)

image

sandanat commented 3 years ago

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

ferretwithaberet commented 3 years ago

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. image

Provide a pdf file please.

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

ferretwithaberet commented 3 years ago

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

image

Edit: Reworded

sandanat commented 3 years ago

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

ferretwithaberet commented 3 years ago

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 commented 3 years ago

Thanks!

ferretwithaberet commented 3 years ago

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

sandanat commented 3 years ago

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

ferretwithaberet commented 3 years ago

@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 commented 3 years ago

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. image

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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. image

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 commented 3 years ago

@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:

image

faisalindrianto commented 3 years ago

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 : Screen Shot 2021-10-14 at 13 40 26 (2) Screen Shot 2021-10-14 at 13 40 06 (2)

PDF File : document.pdf

dallasbeek commented 1 year ago

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;
    }
}