我有一个显示许多帖子并允许打印单个帖子的页面(一个 div 及其所有子项)。
通过单击打印按钮，我遍历页面上的每个元素并将其设置如下样式:
要打印的 div 设置为
printme类，它将top和left属性设置为 0 并将>position到absolute。打印的子元素的 div 是独立的
如果该元素是要打印的 div 的父元素，我将添加类
print-visibility-hide以设置visibility: hidden。否则，我添加一个设置
display: none的类。其输出如下所示。
一切正常，除了打印空白页 - 我推测这是由于父 div 使用 visibility: hidden 隐藏内容，因此仍然占用空间。
有没有办法打印我的 div 并以某种方式删除或折叠这个额外的空间？
HTML - 我最终得到如下内容(为简洁起见删除了所有内容):
<body class="print-visibility-hide">
<div class="page-container print-visibility-hide">
<div class="main print-visibility-hide">
<div class="main-content d-section-top print-visibility-hide" id="main-content" style="background: transparent none repeat scroll 0% 0%; margin-left: 145px;">
<div id="gemwrapper" class="gemwrapper print-visibility-hide" style="display: block;">
<div class="gem-content-wrapper d-item d-section print-visibility-hide">
<div class="gem-content-main gems print-visibility-hide">
<div class="print-visibility-hide">
<div style="display: block;" id="s-g1353" class="print-visibility-hide">
<table class="print-visibility-hide">
<tbody class="print-visibility-hide">
<tr class="item tools print-visibility-hide">
<td class="textarea print-visibility-hide">
<div id="gparent1353" class="textarea print-visibility-hide">
<div id="gx1353" class="printme">
<pre>
This is the text I am printing which can be any length.</pre>
CSS
@media print {
body * {
visibility: hidden;
}
html,
body {
height: auto;
}
.print-display-none,
.print-display-none * {
display: none !important;
}
.print-visibility-hide,
.print-visibility-hide * {
visibility: hidden !important;
}
.printme,
.printme * {
visibility: visible !important;
}
.printme {
position: absolute;
left: 0;
top: 0;
}
.printme,
.printme:last-child {
page-break-after: avoid;
}
}
最佳答案
像这样使用@media 打印:
@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}
更新 2:
使用此代码:而不是您的代码
@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid !important;
page-break-before: avoid !important;
}
.print-display-none,
.print-display-none * {
display: none !important;
}
.print-visibility-hide,
.print-visibility-hide * {
visibility: hidden !important;
}
.printme,
.printme * {
visibility: visible !important;
}
.printme {
position: absolute;
left: 0;
top: 0;
}
}
关于javascript - 打印时删除空白页 - 使用可见性 : hidden，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41196346/