Getting a Blank Page along with the component to be printed about react-to-print HOT 16 CLOSED

If anyone lands here, perhaps this will help:

@media print {
  html, body {
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }
}

from react-to-print.

The solution from @srj-github almost solved my problem (thank you btw). I had to make a little change.
Instead of
height: 100vh;
I had to write
height: auto;

In my case, I had a list which orginally had several rows but I wanted to print only the ones that were checked. If you write 100vh, the print won't take more than one page (it seems that it always prints one page), even when sometimes you actually need two or more pages to show all the rows. But if you write the value auto for the prop height, then it will automatically calculate the correct quantity of pages you need.

from react-to-print.

For whoever needs dynamic content that can be more than 1 page, and @JavierVescio's solution didn’t work for him. I managed to remove the extra page with this-

@media print {
  html, body {
    height: initial !important;
    overflow: initial !important;
  }
}

from react-to-print.

Hi @LucasBSC can you please create a new issue with more details if you are experiencing a problem? Thank you

from react-to-print.

If anyone lands here, perhaps this will help:

@media print {
  html, body {
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }
}

Thanks, @srj-github, It has worked for me.

from react-to-print.

@srj-github

    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;

It works for me!!
Thanks, friend.

from react-to-print.

Thanks, this works @srj-github

from react-to-print.

 height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;

Not working

from react-to-print.

Hi @shyam2794 sorry for the delay. Try the new beta version which is going to rely on an iframe to solve the cross origin issues some people are experiencing.

npm install [email protected]

and let me know the feedback if this solves issues

from react-to-print.

There has been a rewrite pivoting away from popup windows.

npm install [email protected] --save

from react-to-print.

I am facing the same issue with firefox, and neither of those versions fix the issue. Also tried using pageStyle to set the overflow property with no success. Works great on chrome

from react-to-print.

Hello, is this problem already solved somehow? Having same issue here

from react-to-print.

I am using the latest version and no working for me; is there and other proposed solution please

from react-to-print.

@zainpros if you are having problems please create a new issue and describe your problem, as well as share the code you are using please, thank you.

from react-to-print.

ya it is working only for one page but let suppose it page can be 100 page or some time it can be 1 page
but when it is only one page still it is showing two page so on basis of page count we would be inject css ?

from react-to-print.

@srj-github

    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;

It works for me!! Thanks, friend.

This works for me. It handles one page and multiple pages correctly. @srj-github 's solution will cut it to a dead one page.

from react-to-print.