How to use print.css to print a page fitting A4 format

Ask us anything How do I?
1

Hi there,

I have a use case in which a user can view an invoice on the screen. I want to add a button to print the invoice, either printing to paper or pdf.

The printed version should fit the a4 and should only have the invoice. So navbar and print button should be excluded from the printed version.

I noticed I could use window.print(), but I did not succeed to apply a specific css. I als tried to set a state prior to the print event, but that didn’t work.

Looking forward to see some tips and tricks for this.

1 Like
2

You can control how things print through a CSS media query applied through custom CSS. But there’s an interesting alternative approach in the form of paper CSS that you could include in either custom code or using the State Change weweb embed tool:

3

Thanks I will look in to this. For example: I can use a print media query on the print button to set it to hidden.

4

Seems doable, but the print in editor doesnt work that good, as there is the UI. I’m publishing to find out how it keeps up.

Screenshot 2023-09-08 at 10.05.30
Screenshot 2023-09-08 at 10.05.303600×2338 333 KB

Seems like it works, but on chrome attempts to print two pages, instead of one :smiley: Firefox works okay.

Screenshot 2023-09-08 at 10.10.51
Screenshot 2023-09-08 at 10.10.511920×1247 47.9 KB

5

Did you try out paper css?

6

Hello, yes, what you see in the screenshot is actually paper css. I’ll be doing a tutorial this weekend on how to make an UI for this too.

Edit: A demo can be found here. Early next week, I’ll have the video ready on our agency channel) It’s pretty simple to implement tho!

2 Likes
8

did you get a chance to do that video? where can I find it?

2 Likes
9

Hey there, I’m trying to set up paper css to print certain elements from a page. Following this guide, it seems that it’s required to add a class tag to the body element. Was anybody able to do this? (When I try to add custom code in the body element, I basically only add the code inside the body element, I’m not able to add the class to the body element itself.)