如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
我的方法-简单的CSS和JS。也适用于React/NextJS。
const handlePrint = e => {
e.preventDefault();
const bodyElement = document.getElementsByTagName('body')[0];
bodyElement.classList.add('printing');
window.print();
bodyElement.classList.remove('printing');
};
.printing {
visibility:hidden;
}
.printView {
visibility:visible;
}
.printing .printView {
/* You can have any CSS here to make the view better on print */
position:absolute;
top:0;
}
它能做什么?
将.printing类添加到body元素。在CSS中，我们用可见性隐藏所有正文内容:hidden; 与此同时，我们用.printing . printview保持CSS的就绪状态，以便为打印区域提供我们想要的任何类型的视图。 触发window.print (); 当用户取消/ prints时，从body元素中删除.printing类。
例子:
<button onclick="handlePrint">
Download PDF
</button>
<div>
<h1>Don't print this</h1>
<div class="printView">Print this</div>
</div>
如果这对任何人有帮助，请告诉我:)
其他回答
It's better solution. You can use it Angualr/React
Html
<div class="row" id="printableId">
Your html
</div>
Javascript
function printPage(){
var printHtml = window.open('', 'PRINT', 'height=400,width=600');
printHtml.document.write('<html><head>');
printHtml.document.write(document.getElementById("printableId").innerHTML);
printHtml.document.write('</body></html>');
printHtml.document.close();
printHtml.focus(); = 10*/
printHtml.print();
printHtml.close();
return true;
}
您是否可以使用打印样式表，并使用CSS来排列想要打印的内容?阅读这篇文章获取更多的建议。
你可以用这个: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
或者使用visibility:visible和visibility:hidden css属性和@media print{}
'display:none'将隐藏所有嵌套的'display:block'。这不是解。
这里有一个通用的解决方案，只使用CSS，我已经验证工作。
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
其他方法都不太好。使用display很棘手，因为如果任何元素都没有display:none，那么它的后代也不会显示。要使用它，您必须更改页面的结构。
使用可见性效果更好，因为您可以为后代打开可见性。但是，不可见的元素仍然会影响布局，所以我将section-to-print移到左上角，以便正确打印。
@Kevin佛罗里达 如果你有同一个类的多个div，你可以这样使用它:
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>
我使用的是Colorbox内内容类型
$(document).on('click', '.printdiv-btn', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $('body').html();
var printArea = $this.parents('.printableArea').html();
$('body').html(printArea);
window.print();
$('body').html(originalContent);
});
