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;
  }
}