我有一个特定类别的 div，我想将其打印在不同的页面上。我想隐藏所有其他东西，如按钮、工具栏等。我还想在每个页面的顶部应用一些边距或填充。我正在尝试使用如下打印样式表来执行此操作:
@media print {
html, body {
height: 100%;
}
body * {
visibility: hidden;
}
.mydiv .mydiv * {
visibility: visible;
}
.mydiv {
padding-top:10em;
}
}
但是，这在顶部的第一页上留下了很大的空白，因为还有其他内容，我想将可见性设置为隐藏实际上不会折叠那里的其他内容占用的空间。我尝试对 .mydiv 执行 display:none 和 display:block，但页面上没有显示任何内容。此外，在后续页面上，mydiv 在顶部和左侧没有边距。我尝试了 padding-top 或 margin-top 我已经尝试过 em、mm、px 等，但似乎没有任何效果。
最佳答案
试试这个片段，它应该适合你
window.print()@media print {
@page
{
size: auto; /* auto is the initial value */
/* this affects the margin in the printer settings */
margin: 0mm 0mm 0mm 0mm;
}
body *:not(.mydiv) {
display:none
}
.mydiv * {
display: block !important;
}
.mydiv {
display: block !important;
padding-top:0em;
}
}<html>
<head>
<title> New Document </title>
</head>
<body>
<h1 id="header">This should be hidden</h1>
<div>This should be hidden too</div>
<div class='mydiv'>
<h1>This should be Printed</h1>
<div> some other details that needs to visible in print </div>
</div>
</body>
</html>关于javascript - 如何在单独的页面上打印带有类的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59260912/