如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
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;
}
其他回答
如果你只想打印这个div，你必须使用指令:
@media print{
*{display:none;}
#mydiv{display:block;}
}
您是否可以使用打印样式表，并使用CSS来排列想要打印的内容?阅读这篇文章获取更多的建议。
我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS，要么不能在所有浏览器中工作。我找到了一个完美而简单的解决方案，既不丢失CSS，也适用于所有浏览器。
Html
<div class="row" id="print-div">
Your html
</div>
打印稿
let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
.write(`<html>
${printHead}
<body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();
另一种不影响当前页面的方法，它还在打印时持久化css。这里的选择器必须是特定的div选择器，我们需要打印的内容。
printWindow(selector, title) {
var divContents = $(selector).html();
var $cssLink = $('link');
var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth * 0.6);
printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
for(var i = 0; i<$cssLink.length; i++) {
printWindow.document.write($cssLink[i].outerHTML);
}
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload = function () {
printWindow.focus();
setTimeout( function () {
printWindow.print();
printWindow.close();
}, 100);
}
}
这里提供了一些时间显示外部css被应用到它。
我来这个派对已经很晚了，但我想提出另一种方法。我写了一个叫做PrintElements的小JavaScript模块，用于动态打印网页的各个部分。
It works by iterating through selected node elements, and for each node, it traverses up the DOM tree until the BODY element. At each level, including the initial one (which is the to-be-printed node’s level), it attaches a marker class (pe-preserve-print) to the current node. Then attaches another marker class (pe-no-print) to all siblings of the current node, but only if there is no pe-preserve-print class on them. As a third act, it also attaches another class to preserved ancestor elements pe-preserve-ancestor.
一个非常简单的补充只打印的css将隐藏和显示各自的元素。这种方法的一些好处是保留了所有的样式，它不需要打开一个新窗口，不需要移动大量的DOM元素，而且通常它对原始文档是非侵入性的。
请参阅演示，或阅读相关文章以获得更多详细信息。
