react-to-print (^2.14.4) on Mobile Safari

[SinaSaintZero]

https://codesandbox.io/s/rzdhd The issue is that it is perfectly working on windows (chrome and firefox I tried). But it is not working on IOS devices (I tried Safari and Chrome). It generates only a part of the page or nothing at all. Does anyone have faced this issue? Thank you in advance

[MatthewHerbst]

Hello. I don't have an iOS device that I can test on, and the simulator doesn't show the issue. Do you mind posting a video? Are you getting any errors in the console?

It should be noted that behind-the-scenes Chrome on iOS is still just WebKit since Apple doesn't allow other JavaScript engines on iOS.

[kaushik3pg]

@MatthewHerbst I do get the same(blank page) issue in iOS for safari. There is no console errors for me. On Chrome on iOS it does work fine, however. I use BrowserStack for testing on different devices. With our beta release just around the corner, this is kind of a roadblock for us.

Here's a link for video, if that's helpful : BlankPrintPreviewOnSafariiOS

[saqibn]

Having the same issue.

[MatthewHerbst]

I'll be taking a closer look at this in the next few hours and will update, thanks for the reports

[MatthewHerbst]

I have so, using the Codesandbox example, I have been unable to replicate this on either my local simulator or on Browserstack. Still looking into it, but if anyone has another website using react-to-print that I can use to test it would be appreciated.

[sam-picktrace]

Hello @MatthewHerbst, I think I have a problem similar to the one reported by @SinaSaintZero. On the web, everything works perfectly, but on my mobile device (Android using the chrome browser), the problem seems to be that, when opening the preview screen for printing, removeAfterPrint is called, so the preview shows a blank page. If removeAfterPrint is omitted, everything seems to work fine and the content is displayed correctly in the page print preview.

useReactToPrint({
    content: () => somethingToPrint,
    onAfterPrint: () => doSomeCleanup,
    removeAfterPrint: false, // IT CAN BE OMITTED, SINCE DEFAULT VALUE IS FALSE
})

[nikolajbotalov]

@sam-picktrace, thanks, your method helped.

[MatthewHerbst]

Hello @MatthewHerbst, I think I have a problem similar to the one reported by @SinaSaintZero. On the web, everything works perfectly, but on my mobile device (Android using the chrome browser), the problem seems to be that, when opening the preview screen for printing, removeAfterPrint is called, so the preview shows a blank page. If removeAfterPrint is omitted, everything seems to work fine and the content is displayed correctly in the page print preview.

useReactToPrint({
    content: () => somethingToPrint,
    onAfterPrint: () => doSomeCleanup,
    removeAfterPrint: false, // IT CAN BE OMITTED, SINCE DEFAULT VALUE IS FALSE
})

Apologies for the delayed response. This makes sense unfortunately. Not all browsers wait for the Print Preview to close before continuing to call code 😢 We don't have a way to make them to either, so we really are at their mercy here. I'll be adding a section to the README about this

[leeyuchang]

I have the same issue on iOS like @SinaSaintZero

[durini309]

I still find this issue.. If I try printing it from chrome (from my iphone) it prints like a "screenshot" of my current screen instead of the component it should print...

const handlePrint = useReactToPrint({
    content: () => componentRef.current,
    removeAfterPrint: false
  })