我有一个合同,它在可滚动的 div 中显示。我想给我的用户打印可滚动 div 的内容的能力。这个 div 大约有三页长。我在这个应用程序中使用 bootstrap,并尝试使用“visible-print”css 类。当我现在测试打印功能时,在 chrome 打印预览屏幕上只显示了可滚动 div 顶部的内容,它还带有垂直滚动条并截断了剩余内容。
CSS:
#scrollableDiv{
width: 100%;
height: 700px;
overflow-y: scroll;
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
}
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.visible-print {
display: block !important;
overflow: visible;
}
}
HTML:
<div id="scrollableDiv" class="margin-bottom-20">
<div class="visible-print">
<!-- CONTRACT CONTENTS HERE -->
</div>
</div>
window.print()
来触发打印命令,这样用户就不必实际点击打印按钮了。请尝试 @Sun_Sparxz 给出的答案,并告诉我们是否有效。 - Gui Imamura