仅打印特定尺寸的 HTML 域中的 div答案

【问题标题】：Printing only a div from an HTML domain in specific dimensions仅打印特定尺寸的 HTML 域中的 div
【发布时间】：2022-01-15 23:43:44
【问题描述】：

我正在尝试找到一种方法，仅打印来自具有特定尺寸（3“x5”）的网络域的 div。我设置了打印按钮，但到目前为止，每次打印整个页面都会出现。

有没有办法在打印预览中隐藏所有非 div 内容？

CSS

.wholebody {
  height: 289px;
  width: 489px;
  border: 2px solid #00001a;
}

</style>

HTML

<body>


<button onclick="window.print()">Print Page</button>


<div class="wholebody">

</div>

让我知道我是否应该（以及什么样的）JS 函数可以让我隐藏非 div 内容。谢谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用 css @media 输入 print 来选择要打印的内容。

打印用于在打印预览模式下在屏幕上查看的分页材料和文档。（有关这些格式特有的格式问题的信息，请参阅分页媒体。）

.wholebody {
  height: 289px;
  width: 489px;
  border: 2px solid #00001a;
}

@media print{
body{
visibility: hidden;
}
div{
visibility: visible; 
}

}

<button onclick="window.print()">Print Page</button>

<p>Not printing this</p>
<div class="wholebody">Print this</div>

【讨论】：

【解决方案2】：

您可以在@media screen{} 块中编写网页打开时想要显示的样式。当window.print() 方法被执行时，@media print{} 块内的样式被应用。在此示例中，单击 <button> 元素会将创建的元素传输到创作页面。

var button = document.getElementById('printButton');

printButton.addEventListener('click', function(){  
  var div = `<div style="width:30px;height:50px;border:2px solid black; margin: 20px; display: block;"></div>`;
  $('.wholebody').append(div);
   window.print();
});

@media screen{
  .wholebody {
    height: 289px;
    width: 100%;
    border: 2px solid #00001a;
  }
  
  #printButton{    
    margin-bottom: 5px;
  }
}

@media print{
  #printButton{
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <button id="printButton">Print Page</button>

  <div class="wholebody">
  </div>
</body>

【讨论】：

它们都有效。谢谢大家！
@Jericho 两者都不起作用。动态向页面添加元素时，其他解决方案将不起作用。
你说得对#2。我说得太早了。