我正在嘗試找到一種僅從具有特定尺寸（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 內容。謝謝。
uj5u.com熱心網友回復：
您可以使用 css@media型別print來選擇要列印的內容。
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>uj5u.com熱心網友回復：
@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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411889.html
標籤：
上一篇：有沒有辦法可以觸發一些類似于縮放效果的效果，但不改變影像的寬度和高度？
下一篇：滾動的三個案例-在if中起作用