Getting a Blank Page along with the component to be printed

[shyam2794]

Hi ,

I am trying to print the bill . And am facing some issues in handling it . I am able to get the bill component to be printed but am getting another blank page .

By Default it takes two pages . Am not sure how to resolve this .

[gregnb]

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

[gregnb]

There has been a rewrite pivoting away from popup windows.

npm install [email protected] --save

[dsdavis4]

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

[LucasBSC]

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

[MatthewHerbst]

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

[zainpros]

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

[MatthewHerbst]

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

[srj-github]

If anyone lands here, perhaps this will help:

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

[JavierVescio]

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.

[ashabhussan]

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.

[shlaskt]

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

[mateusdegobi]

@srj-github

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

It works for me!!
Thanks, friend.

[abhijitkumarIN]

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 ?

[yasinbhojani]

Thanks, this works @srj-github

[darkengine]

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

[Preetam7064]

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

Not working

[GourabPaul007]

It does not work in my case, The styles on 2nd page onwards gets weird.

This is what its supposed to print

But in the print window, it shows

I have tried all solutions in this thread. Is there any reason why it is behaving like this?

[MatthewHerbst]

I have tried all solutions in this thread. Is there any reason why it is behaving like this?

Please share your code, ideally in a working Codesandbox or similar. Can't debug from pictures.

[GourabPaul007]

Here is a codesandbox https://codesandbox.io/p/sandbox/quiet-pine-8behs
I think the problem lies with absolute positioning of the smaller blocks/components. referring to this

This project requires absolute positioning. Help me know if there is any other way to fix this problem.

[MatthewHerbst]

Here is a codesandbox https://codesandbox.io/p/sandbox/quiet-pine-8behs

For me this prints without issue, though it's hard to tell because the formatting is hard to understand