React-to-print: Print: Total: 2 sheets of paper ?

[zhilianbi520]

I've met the question as you too.The printed page always displays 2 pages, even though there is only 1 page。my website Only 580px high

Here's what I need to print。

`````

xxx

xx  xx	xx  xx	xx  xx	xx  xx	xxxxx xxxxxxxxxxx
Name	Sex	Age	Natinonality	Case Nunber

xxxxxx： Case description & Diagnosis xxxxx xxxxx

℞： xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx 1ml -  -  4ml

xxxxx: xxxxx
Sig.
xxxxx xxxxx xxxxx xxxxx
Date

xxxxx	xxxxx	xxxxx
xxxxx	xxxxx	xxxxx

[ibanjb]

I have the same issue, 2 pages are printed always. Any solution? Any workaround?
Thx!

Using v.2.0.0-alpha.7, the v.2.1.0 crashes (issue https://github.com/gregnb/react-to-print/issues/115 )

[MatthewHerbst]

Hello. Can you please create a working code example so I can see the issue? Thanks

[zhilianbi520]

https://codesandbox.io/s/01vmr100v0

[ibanjb]

Hello. Can you please create a working code example so I can see the issue? Thanks

I uploaded a project, using pro.ant.design scaffolder (the same that I'm using in my project) into my repo with an example about this problem.

You can find it in:
https://github.com/ibanjb/ReactToPrintIssueTest

Take a look at the readme.MD to know how to test it, but its pretty simple :)

Basically, the two files that you need to take a look are:

• src/pages/Dashboard/Analysis.js -> has the object ReactToPrint
• src/components/PrintTest/index.js -> renders the page to be printed

Another bug that I found is about the radio and check buttons. In Google Chrome are printed good but in Firefox doesn't. I don't know if will be better to create another issue related with that or not.. what do you think?

Thanks!

[MatthewHerbst]

@ibanjb #66 is being used to track the known issues with the checkboxes. If you have any ideas there, please let me know.

@zhilianbi520 playing with the codesandbox, it seems the issue is marginTop: "30px", that you have. Removing that causes the page to properly print in a single instance. The strange part is that if I remove the content of that div but keep the marginTop: "30px", it still prints two pages of all white space basically. Clearly there is some calculation that is having problems. My best recommendation for right now is to use a class to set the margin, and then use a print media query to not include the margin while printing. I'll keep looking into this issue when I get a chance, thanks.

[zhilianbi520]

@ibanjb #66 is being used to track the known issues with the checkboxes. If you have any ideas there, please let me know.

@zhilianbi520 playing with the codesandbox, it seems the issue is marginTop: "30px", that you have. Removing that causes the page to properly print in a single instance. The strange part is that if I remove the content of that div but keep the marginTop: "30px", it still prints two pages of all white space basically. Clearly there is some calculation that is having problems. My best recommendation for right now is to use a class to set the margin, and then use a print media query to not include the margin while printing. I'll keep looking into this issue when I get a chance, thanks.

ok，thanks~!

[ibanjb]

@ibanjb #66 is being used to track the known issues with the checkboxes. If you have any ideas there, please let me know.
@zhilianbi520 playing with the codesandbox, it seems the issue is marginTop: "30px", that you have. Removing that causes the page to properly print in a single instance. The strange part is that if I remove the content of that div but keep the marginTop: "30px", it still prints two pages of all white space basically. Clearly there is some calculation that is having problems. My best recommendation for right now is to use a class to set the margin, and then use a print media query to not include the margin while printing. I'll keep looking into this issue when I get a chance, thanks.

ok，thanks~!

About the 2 pages error, the problem was solved using your recommendations, remove the unnecesary margins and works! Thx!.

About the other problem, the checkboxes and radiobuttons, I opened an issue into ant-design github page and the response was super-duper chinese: "This is a bug of the browser that you are using, we will not fix. Issue is closed". So, meanwhile this problem exists, I will use a workaround to replace those object by images or apply a custom css to those elements, will try.

Ant-design issue link: https://github.com/ant-design/ant-design/issues/15980

Thanks again!

[Movinda]

@ibanjb #66 is being used to track the known issues with the checkboxes. If you have any ideas there, please let me know.

@zhilianbi520 playing with the codesandbox, it seems the issue is marginTop: "30px", that you have. Removing that causes the page to properly print in a single instance. The strange part is that if I remove the content of that div but keep the marginTop: "30px", it still prints two pages of all white space basically. Clearly there is some calculation that is having problems. My best recommendation for right now is to use a class to set the margin, and then use a print media query to not include the margin while printing. I'll keep looking into this issue when I get a chance, thanks.

it worked for me also, i removed unnecessary margins(top and bottom). how can i insert top and bottom margins properly if i want to insert?

[william-deckard]

A little late but this may have been caused by having Overflow: visible somewhere and as it was pointed out, margins were probably extending..