[英]ReactJS - How to print all the content of a Scrollable elment with react-to-print
I have a <div>
tag that has a list of elements, the list can be long so I gave a fixed height to the <div>
tag and overflow:auto
property to have a scrollable list in case of overflow.我有一个包含元素列表的
<div>
标签,该列表可以很长,所以我为<div>
标签和overflow:auto
属性提供了一个固定的高度,以便在溢出时有一个可滚动的列表。
Now I have a button
at the bottom of this <div>
to print the content of <div>
.现在我在这个
<div>
的底部有一个button
来打印<div>
div> 的内容。 I am using react-to-print
library as it seemed the easiest way to print the contents of my <div>
along with the CSS.我正在使用
react-to-print
库,因为它似乎是打印<div>
内容以及 CSS 的最简单方法。
The problem is that the print preview is showing only the elements present in the viewport, but I want all the elements in the <div>
to print.问题是打印预览仅显示视口中存在的元素,但我希望打印
<div>
中的所有元素。
I can not use the overflow: visible
property on my <div>
as I definitely need the <div>
to be a scrollable element also I can not place the button
to print the list inside my <div>
as users cant keep scrolling to the end of list to print it.我不能在我的
<div>
上使用overflow: visible
属性,因为我确实需要<div>
是一个可滚动的元素,我也不能放置button
来在我的<div>
中打印列表,因为用户无法继续滚动到列表末尾打印它。
Here is a sandbox to play around: https://codesandbox.io/s/material-demo-forked-wifyd?file=/demo.js:337-341这是一个可以玩的沙箱: https://codesandbox.io/s/material-demo-forked-wifyd?file=/demo.js:337-341
link to react-to-print: https://www.npmjs.com/package/react-to-print打印反应链接: https://www.npmjs.com/package/react-to-print
Any help is highly appreciated!!非常感谢任何帮助!!
Try adding @print
media queries to your div and increase the height of the div while printing alone?尝试将
@print
媒体查询添加到您的 div 并在单独打印时增加 div 的高度?
I noticed it was not printing the viewport, rather it was printing only the top list of the div.我注意到它没有打印视口,而是只打印 div 的顶部列表。
ie The part of div that is visible only comes while printing.即 div 的可见部分仅在打印时出现。
Something like就像是
@media print {
div{
height: 100%;
}
}
Add css rule with ".important" will solve the problem.添加带有“.important”的 css 规则将解决问题。
@media print {
#scrollableDiv {
width: 100%;
height: 100% !important;
overflow: visible;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.