Question

是否有用于打印ReactVirtualized列表的功能/设置？我想打印列表的全部内容（行是延迟加载的，但也许有人知道如何做）或打印页面中适合的内容而不必设置像素尺寸。

我查找了文档，却找不到任何东西。

谢谢。

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时，将react-virtualized属性设置为最大行数（仅在使用上述CSS时才有意义）
使用css-vars，将计算出的表格高度传递给css
在CSS媒体查询-打印模式中，根据传递的CSS变量设置高度
仅在反应生命周期完成渲染后才调用print（）（不用担心，渲染将不会显示在浏览器窗口中）

...我使用了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>

如何打印ReactVirtualized网格？

2 个答案: