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 😢