1

I maintain a library, react-to-print. The library provides a React component that at its core has two inputs: a trigger (usually a button), and content. When the trigger is clicked, the library will copy the entire DOM representation of the content and put it into an iframe. It will also copy all style links on the page to ensure the content is styled correctly within the iframe.

A while ago, someone raised an issue (the end of the thread explains the core problem) concerning the library's seaming inability to print content that was horizontally scrolled, in this case, within a table. It turns out that what is actually happening is that a component within the content is virtualizing its render, meaning only content this is visible on the screen is actually being rendered. So the issue is that react-to-print is not maintaining the scroll positions of child elements when it copies them into the iframe.

I know how to scroll the entire page itself inside of an iframe, but do not know how to maintain the scroll of individually scrolled DOM elements that are children of the window. Is there a way to do that?

While an ideal solution would of course be just turn on a setting or something and done, I'm guessing that, if a solution is possible, it will look something like:

  1. Iterate over every element on the page
  2. If the element has a scroll, save its scroll position in a map
  3. Copy over the elements into the iframe (as is currently done)
  4. Iterate over every element in the iframe and apply a scroll if one is found for it in the map
Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128
  • Your solution looks like the proper one so I think this is the best way that you can handle this problem. – pawelbylina Sep 04 '19 at 13:35
  • @pako what is the best way to implement what I suggested? – Matthew Herbst Sep 05 '19 at 00:02
  • I've posted an answer but admin deleted it. So here you have my basic implementation: https://codesandbox.io/embed/static-luqbu – pawelbylina Sep 05 '19 at 06:54
  • 1
    @samuel-liew why did you delete his answer, it seems perfectly ok to me (I can see it Pako because of my rep level) – Matthew Herbst Sep 05 '19 at 09:02
  • does it work for you? Enough to fix your problem in `react-to-print`? – pawelbylina Sep 05 '19 at 09:15
  • I have the same problem where I use `react-to-print` where a react component overflow horizontally from the visible screen. How would you shrink it down, resize or make it enter in the exportable PDF ? – iMitwe Dec 02 '19 at 18:08

0 Answers0