Body cells appear incorrectly/blank when trying to print ag-grid

[OmkarRa]

I use ag-grid library to show a table and react-to-print to print visible part of that table.

Print works correctly when horizontal scroll position is at the start.

But if I scroll it horizontally further, and then try to take print, only header cells appear correctly. Body cells are either blank or incorrect.

Here is a codesandbox that replicates the issue https://codesandbox.io/s/5wj8449ojx

Scroll horizontally

Blank cells appear

[MatthewHerbst]

Thanks for the report. I use ag-grid as well. I'll try to look into this over the weekend, though there are a few other bugs that I'd like to try and address first.

[sameeravhad119]

Hi @MatthewHerbst, I am also facing same issue. Could you please look into it ?

[mikhail-angelov]

I have similar issue, sometime printed document is blank I'm sure the root cause of this issue, not all html, style, link nodes are loaded once this timer is expired

    setTimeout(() => {
      target.contentWindow.focus()
      target.contentWindow.print()
      this.removeWindow(target)

      if (onAfterPrint) {
        onAfterPrint()
      }
    }, 500)

it's better remove this timer and count all html nodes, not just link it will make lib more stable I can prepare PR for it

[duyhau206]

Hi every body. I have same issue. I just use div element to render component and sometime printed document is bank (where data is rendered). Looking forward to help from everyone

[sameeravhad119]

@mikhail-angelov Thank you so much for your reply. I did changes locally as you mentioned. But Still it is giving me blank document for print.

[MatthewHerbst]

Hi everyone. Sorry for the extreme delay on solving this. I had gotten stuck on it and shelved it, but recently thought of something and realized it was the problem.

By default, agGrid virtualizes columns and rows that are not displayed. What that means is that when react-to-print gets an internal copy of what's on the screen, agGrid does not actually render the columns to the right because from react-to-print's perspective, they are not in frame.

A long-term solution to this is to scroll the window in the iframe react-to-print uses to match the scroll of the screen. I'll look into that as soon as I can (PRs are also always welcome). A short term solution is to turn off column virtualization for agGrid. You can do that by passing the suppressColumnVirtualisation prop to the grid. See more about that prop and others similar to it here: https://www.ag-grid.com/javascript-grid-properties/#scrolling

[MatthewHerbst]

This is actually much harder than I thought, possibly not possible. It's not enough to scroll the entire iframe to match the scroll of the page, since that won't actually scroll inside of the agGrid. I don't know of a good way to maintain the scroll position within the grid. The best generic option I can offer right now is for each app to remember the scroll positions of whatever needs to be scrolled, and then in onBeforeGetContent match the scrolls inside of the iframe to the scrolls of the screen. Of course, this is totally unreasonable, but I don't know of a way for react-to-print to capture every single element's scroll position. If anyone has a suggestion on how to do this, please let me know!

[MatthewHerbst]

https://stackoverflow.com/questions/57786715/replaying-scroll-events-for-every-element-in-iframe

[shastrysurabhi]

Hi, I am using a react-data-table-component and facing the same issue, that I get a blank print screen when I try to print the table most of the time. Looking forward for inputs.

[MatthewHerbst]

Not sure when it became available (maybe it always has been), but you can add the suppressColumnVirtualisation grid prop which fixes this issue. Note that this can cause performance issues if you have a massive number of columns.

[lucianolopezz]

same!