ReactJS - 如何使用 react-to-print 打印可滚动元素的所有内容

Question

我有一个包含元素列表的<div> 标记，该列表可能很长，因此我为<div> 标记和overflow:auto 属性提供了一个固定高度，以便在溢出时有一个可滚动列表。

现在我在这个<div> 的底部有一个button 来打印<div> 的内容。我正在使用 react-to-print 库，因为它似乎是打印 <div> 的内容以及 CSS 的最简单方法。

问题是打印预览只显示视口中存在的元素，但我希望打印<div> 中的所有元素。

我不能在我的<div> 上使用overflow: visible 属性，因为我绝对需要<div> 作为可滚动元素，我也不能将button 放置在我的<div> 中作为用户打印列表不能一直滚动到列表的末尾来打印它。

这是一个可以玩的沙盒：https://codesandbox.io/s/material-demo-forked-wifyd?file=/demo.js:337-341

react-to-print 链接：https://www.npmjs.com/package/react-to-print

非常感谢任何帮助！

Answer 1

尝试将@print 媒体查询添加到您的 div 并在单独打印时增加 div 的高度？

我注意到它没有打印视口，而是仅打印 div 的顶部列表。

即 div 中可见的部分仅在打印时出现。

类似

@media print {
  div{
    height: 100%;
  }
}