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

Question

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

rohit9430 opened this issue 3 years ago · 21 comments

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

Answer 1 · 2021-06-13T17:21:36.000Z

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

Answer 2 · 2021-06-21T03:35:00.000Z

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

Answer 3 · 2021-06-21T03:42:55.000Z

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?

Answer 4 · 2021-08-03T05:15:05.000Z

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

Answer 5 · 2021-10-05T23:01:58.000Z

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.

Answer 6 · 2021-10-05T23:07:55.000Z

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!

Answer 7 · 2021-10-08T12:09:15.000Z

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.

Answer 8 · 2021-10-20T07:19:26.000Z

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:

Answer 9 · 2021-10-21T01:15:14.000Z

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:

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
react-to-print can try to find a way to open the content in the user's actual web browser, not in the WebView
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

Answer 10 · 2023-05-27T19:41:51.000Z

Is there any update about the issue?

Answer 11 · 2023-05-28T07:45:06.000Z

Is there any update about the issue?

Unfortunately we're at the mercy of Android here 😢

Answer 12 · 2023-10-21T05:43:53.000Z

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

Answer 13 · 2023-10-23T01:58:14.000Z

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

Answer 14 · 2024-05-06T17:40:02.000Z

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

Answer 15 · 2024-05-06T17:46:02.000Z

@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

Answer 16 · 2024-05-06T17:47:25.000Z

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

Answer 17 · 2024-05-06T17:56:09.000Z

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

Answer 18 · 2024-05-06T17:58:45.000Z

@MatthewHerbst also documentTitle is not working 🤔

Answer 19 · 2024-05-08T13:05:59.000Z

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

Answer 20 · 2024-05-09T09:19:51.000Z

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

Answer 21 · 2024-08-04T20:40:35.000Z

I have these problems:

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