Printing entire UI on mobile

[hrutvikpatel]

ReacToPrint is able to print the specific react component I want to print on browsers on the desktop and on the IPad safari works as well. However, when printing the react component using chrome on the IPad the entire UI is printed.

I checked the console and there were no errors present.

I also checked that the ref returned to the content property is referring to the react component that needs to be printed.

I am not sure why ReactToPrint defaults to printing the entire UI on chrome on the IPad, I was wondering if someone else also ran into this issue.

[hrutvikpatel]

I am trying to understand the code and was wondering what the purpose of the setTimeout is in the startPrint method?

[hrutvikpatel]

It appears to be an issue with iframe. Where iframe.contentwindow.print() seems to have an issue printing on safari/chrome on IOS. It prints the entire UI instead. I wonder if there is a workaround to this.

[MatthewHerbst]

Unfortunately we have no control (to my knowledge) of what the browser decides to do after we call .print(). It sounds like those browsers print everything open, not just the iframe. If you know of a solution we can use to fix this issue I would be happy to include it.

[ekediala]

ReacToPrint is able to print the specific react component I want to print on browsers on the desktop and on the IPad safari works as well. However, when printing the react component using chrome on the IPad the entire UI is printed.

I checked the console and there were no errors present.

I also checked that the ref returned to the content property is referring to the react component that needs to be printed.

I am not sure why ReactToPrint defaults to printing the entire UI on chrome on the IPad, I was wondering if someone else also ran into this issue.

Hi. Ran into the same issue. Did you find a workaround?

Cheers.

[MatthewHerbst]

@ekediala as noted above, to the best of my knowledge this is not something we can fix. If you know of a solution please let me know

[ekediala]

@MatthewHerbst thank you. Will let you know if I do.

[nate-vukovich]

Any news on this one?

Also ran into this when building a GatsbyJS website and I found the package perfect for the job.

Will also do some digging if there is something doable here ;)

[joungwoo-jay]

Hmm looking for any news for this issue.
We have tested all other browsers with this great library, but I we were not able to print in Chrome on iPad.
The print preview returns entire application... hmm, I will try to use different print method, and update here.

[james-e-morris]

Same issue still here in latest iOS with Chrome.
But furthermore, there is an issue with onBeforeGetContent effects not showing in the iOS print. For example, I have a table in my code that I paginate. Before printing, I un-paginate it for the full print. This works on web, but on iOS, the page does change to remove pagination, but the printout shows with pagination still.

I also can't get the CodeSandbox to print on mobile at all except for the Text-only option. (https://codesandbox.io/s/rzdhd)

[pjethali]

Also having the same issue. Let us know if there is a solution

[nehashende]

Facing the same issue. Does anyone have any update on this?

[onyedika-anagha]

I found a way around it that worked for me. I used

<ReactToPrint
    onBeforePrint={() => setIsPrinting(true)}
    onAfterPrint={() => setIsPrinting(false)}
...

Then make the particular component to take up the whole screen if isPrinting

[m-a-h1]

i have the same issue,
@onyedika-anagha solution seems to work, but not in my case. because the size of the component that i am printing is important, so if i make the component to take the whole screen then it will not be the size that i want it

[MatthewHerbst]

@m-a-h1 could you maybe trick the browser by adding a wrapping div around your component that is transparent and takes up the whole screen, and then has your component as its only child?

[m-a-h1]

@m-a-h1 could you maybe trick the browser by adding a wrapping div around your component that is transparent and takes up the whole screen, and then has your component as its only child?

it will not change the print size. the printer that i use is small, and even if the component take the whole screen , the print final print page will be the full page, not the size that i defined on the component

[PatidarNikunj]

Has anyone got the solution for this issue?

[Pallavi-mah]

Looking forward for the solution or any alternate library that can use for mobile chrome and firefox ?

[Pallavi-mah]

Any news on this one?

Also ran into this when building a GatsbyJS website and I found the package perfect for the job.

Will also do some digging if there is something doable here ;)

Can you please let me know the package?

[simaks]

I found a way around it that worked for me. I used

<ReactToPrint
    onBeforePrint={() => setIsPrinting(true)}
    onAfterPrint={() => setIsPrinting(false)}
...

Then make the particular component to take up the whole screen if isPrinting

It seems that onAfterPrint is being called before printing is even finished on iOS (chrome and firefox). Adding timeout helps for initial view, but if you change some print settings it re-renders bad preview.

[MatthewHerbst]

It seems that onAfterPrint is being called before printing is even finished on iOS (chrome and firefox). Adding timeout helps for initial view, but if you change some print settings it re-renders bad preview.

This is a known issue that is specifically called out on our README. It is not something we can fix. Please note that all browsers on iOS use WebKit under the hood (Apple forces this) so they are basically all the same as Safari. Apple may allow non-WebKit browsers in the near future due to anti-trust issues, especially in the EU and UK 🙏

[simaks]

So in iOS it works on safari, but doesn't on other browsers. I wonder is it a bug of iOS or all iOS browsers except safari?

[yash371]

You can use the old version for this , In my case i use "react-to-print": "^2.14.15" and it work perfectly ...

please make sure use let here

let contentRef=useRef();

.................................................................................

<ReactToPrint
    trigger={() => <Button>Print</Button>}
    content={() => contentRef}
/> 
<StockLogs ref={(e)=>(contentRef=e)}/>

................................................................................

the StockLogs.js .....

export default class StockLogs extends React.Component {
render() {  
  return (<div>....</div>)
 }
}

[MatthewHerbst]

@yash371 the version of react-to-print being used should not have any impact on this issue, and this ticket was created long before v3 was released

[sensasi-delight]

I confirm that I am experiencing the same issue today on v3, while it works fine on v2.

[gorjan-mishevski]

Confirming on my side as well. downgrading to v2 shows the print content vs white screen. I think it might be related with the content: () => vs contentRef logic behind it.
This is for mobile iOS Safari. Not related when running on desktop.

[MatthewHerbst]

Very strange. I'll look to see what's going on this week. Appreciate all the reports. The weird part is that desktop browsers are printing just fine.

[jeremycharron]

Confirming a similar issue on my end as well.
V3: All mobile browsers are printing the whole page instead of the desired item.
V2: Only Chrome for iOS is printing the whole page. Safari for iOS and Chrome for Android are working fine.