如何打印 React Virtualized Grid？

Question

有打印ReactVirtualized Lists的功能/设置吗？我想打印列表的全部内容（行是延迟加载的，但也许有人知道该怎么做）或打印适合页面的内容而无需设置像素尺寸。

我查阅了文档，但找不到任何内容。

谢谢。

Answer 1

一个月前我遇到了类似的问题，我最终让它与一个打印按钮一起工作，该按钮运行一个功能，该功能更改 CSS 以在页面上显示整个列表（即：删除滚动) 然后重新加载完整列表。

.ReactVirtualized__Grid {
    margin: none !important;
    overflow: visible !important;
    display: block;
    height: auto !important; //OR PUT A HUGE AMOUNT WHERE YOUR LIST WILL ALWAYS FIT (9999999px)
}

可能有一种更简洁的方法，但我没有找到任何方法，而且可以很好地满足我的需要。

Answer 2

我找到了一种使用上述解决方案和媒体查询、css-vars 和 overscanRowCount 属性的方法。（听起来很多，其实很短）

有打印模式的状态(true/false)
当为真时，将 react-virtualized 属性设置为最大行数（这仅在使用上述 css 时相关）
使用css-vars，将table的计算高度传递给css
在css媒体查询-打印模式中，根据传入的css-var
仅在 react 生命周期完成渲染后调用 print()（不用担心，渲染不会显示在浏览器上window）

... 我使用了 css 模块，但它可以在纯 css 中完成。 ...我希望这足够清楚

   if (printMode) {        
        window.requestAnimationFrame(() => {
            //requestAnimationFrame is important because window.print is an async function
            window.print();
        })
    }

.paper123 {
    height: 400px;    
    width: 100%
}

@media print {
    .paper123 {
        height: var(--mh) !important; /*the calculated height passed as css-var */
        width: 100%
    }
    :global(.ReactVirtualized__Grid) {
        margin: none !important;
        overflow: visible !important;
        display: block;
        height: auto !important;
    }
}

/* React code */  
<div >
                <Paper className={style.paper123} style={{ "--mh": 48 * (rows.length + 1) + 'px' }}>
                    < VirtualizedTable
                        rowCount={rows.length}
                        rowGetter={({ index }) => rows[index]}
                        columns={columns}
                        overscanRowCount={!printMode ? 40 : rows.length} //overscanRowCount property means that you can define the max number of rows prerendered in the virtualized-table
                    />
                </Paper >
            </div>

如何打印 React Virtualized Grid？

How to print ReactVirtualized Grids?

javascript

reactjs

react-virtualized