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

Question

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

现在我在这个<div>的底部有一个button来打印<div> 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

打印反应链接： https://www.npmjs.com/package/react-to-print

非常感谢任何帮助！！

Answer 1

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

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

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

就像是

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

Answer 2

添加带有“.important”的 css 规则将解决问题。

@media print {
  #scrollableDiv {
    width: 100%;
    height: 100% !important;
    overflow: visible;
  }
}