Printing failed because the contentWindow of the print iframe did not load

[rohit9430]

Printing failed because the contentWindow of the print iframe did not load

[MatthewHerbst]

Hello. Could you please give more details? What is the full error message? Also, what does your code look like? Thank you

[137942170]

react_devtools_backend.js:2560 Printing failed because the contentWindow of the print iframe did not load. This is possibly an error with react-to-print

[MatthewHerbst]

Could you please share the code you use to print? I've not seen this error reported before. Also, what version of React are you using?

[MatthewHerbst]

@rohit9430 @137942170 could you please provide a code sample and let me know what version of React you're using, and what browser/version?

[digio-shanefitzgerald]

IOS version: 14.7.1
safari browser
Model: iphone 12
react: 16.13.1
react-to-print: 2.13.0,
Implementation:

import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";

const App = () => {
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
  });
  return (
    <div ref={componentRef}>
     // content to be printed
    </div>
    <Button onClick={handlePrint}>
      Print
    </Button>
  )
}

The weird part is it works in regular safari, but if the site is opened from an app in a webview, say like slack, that's when it errors.

[MatthewHerbst]

The weird part is it works in regular safari, but if the site is opened from an app in a webview, say like slack, that's when it errors.

Interesting. That's super helpful for helping me debug, thanks for the post. Not sure if it's something we can fix, but will try!

[swarad07]

I can confirm this issue as well. Our logs are filled with users trying to launch the print window from web views inside apps like Facebook and Instagram. They receive this error, This happens in both Android (Chrome) and iOS (Safari).

console error: Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/gregnb/react-to-print/issues/

The print works fine if the website is opened normally in the browser.

[MatthewHerbst]

This is under active research, but at this time prospects are looking grim that we have any power here. I think this is completely in the hands of Google/Apple.

Resources I've found so far:

• A StackOverflow question regarding this topic
• A Chromium bug report about window.print
• Another Chromium bug report this time with security concerns about adding window.print to iframes
• Some references to window.print in the Chromium source

I've also found this hard to properly debug. The simplest way for me to debug this currently is with the "WebView Browser Tester" on the Android Studio emulator. However, running the library's example code there does not produce the error seen in this thread, and instead the print is a no-op, which seems to be the intended behavior by the Chromium team for printing iframes currently unfortunately.

Other resources I came across:

• https://stackoverflow.com/questions/21566052/feature-detection-solution-for-window-print-javascript
• https://stackoverflow.com/questions/9268840/determine-whether-browser-supports-printing
• https://stackoverflow.com/questions/4361119/ios-4-2-uiwebview-javascript-window-print-doesn%c2%b4t-print-not-launch-before-and-a/4362472#4362472

[MatthewHerbst]

Further conversation with the Chromium team seems to confirm that WebView support for window.print isn't coming anytime soon 😢

https://bugs.chromium.org/p/chromium/issues/detail?id=322303#c34

There are a few options here:

1. react-to-print can attempt to completely replace the content of the page with only the node to be printed, print it, and then restore the original value
   • Downsides: this may not be possible for all print environments, users would see potentially unexpected content, there are probably a lot of edge cases to consider that we don't even know about
2. react-to-print can try to find a way to open the content in the user's actual web browser, not in the WebView
3. Websites using react-to-print could tell users, or maybe even force users, to open the page in an actual web browser, not in the WebView

I think option 2 is the ideal, just need to figure out if it's possible, and if it is, how to do it

[HazimAlper]

Is there any update about the issue?

[MatthewHerbst]

Is there any update about the issue?

Unfortunately we're at the mercy of Android here 😢

[MatthewHerbst]

@tiffanytut0225 could you please make a working Codesandbox or similar replicating the problem ideally? It's hard to debug parts of your code

[tiffanytut0225]

@tiffanytut0225 could you please make a working Codesandbox or similar replicating the problem ideally? It's hard to debug parts of your code

The same code I provided works on Codesandbox. 😂
Maybe other things caused the error, I will try to find out.
Thank you for your reply.

[ricardo-fnd]

This error was just thrown in my application. The print works in:

• safari 👍
• firefox 👍
• chrome 🚫

Its a web app, and in Chromes fails... But this code of mine is a released feature, and nothing changed (maybe chrome version)
When I click "print" nothing happens... But this one time, the error was logged to the console

[MatthewHerbst]

@ricardo-fnd can you be more specific please? Desktop Chrome or mobile Chrome? Assuming mobile Chrome, Android or iOS? Also, did you use a WebView or did you actually open in Chrome? WebView is not Chrome

[ricardo-fnd]

@MatthewHerbst Desktop chrome. nothing more. its an nextjs app... this was working before

[ricardo-fnd]

@MatthewHerbst I found the bug. removeAfterPrint was causing it. If I remove that prop, it works fine...

[ricardo-fnd]

@MatthewHerbst also documentTitle is not working 🤔

[ricardo-fnd]

@MatthewHerbst suddenly its working again, without any change... I dont know what to tell you lol. probably some version mismatch

[MatthewHerbst]

Strange, but glad it's working! If it occurs again please let me know

[JJozef]

I have these problems:

1. In chrome mobile it does not work to print (IOS), basically it does not take correctly the content but it takes the whole page.
2. In mobile the documentTitle, does not work, it takes the title of the site.
3. On android it just doesn't work as it should, it takes another behaviour.
4. On IOS, it only works on Safari, but the problem is that it takes more content than expected.