如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
printDiv()函数出现了几次，但在这种情况下，将丢失所有绑定元素和输入值。所以，我的解决方案是为所有名为“body_allin”的东西创建一个div，并在第一个名为“body_print”的外部创建另一个div。
然后调用这个函数:
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}
其他回答
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;
}
在css3中，你可以使用以下功能:
body *:not(#printarea) {
display: none;
}
这里有一个通用的解决方案，只使用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移到左上角，以便正确打印。
使用jQuery，它就像这样简单:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
试试这个:
function printElement($elem){
var $customPrintSection = document.getElementById('customPrintSection'),
$customPrintSectionCss = document.getElementById('customPrintSectionCss');
if ($customPrintSection){
$customPrintSection.remove();
}
if ($customPrintSectionCss){
$customPrintSectionCss.remove();
}
$customPrintSection = document.createElement('div');
$customPrintSection.id = 'customPrintSection';
$customPrintSectionCss = document.createElement('style');
$customPrintSectionCss.id = 'customPrintSectionCss';
document.body.appendChild($customPrintSection);
document.body.appendChild($customPrintSectionCss);
$customPrintSection.innerHTML = $elem.innerHTML;
$customPrintSectionCss.innerHTML = '@media screen { div#customPrintSection { display: none; } } @media print { body *:not(div#customPrintSection):not(div#customPrintSection *) { display: none; } div#customPrintSection a[href]:after { content: none !important; } }';
window.print();
$customPrintSection.remove();
$customPrintSectionCss.remove();
}
我喜欢这个解决方案，因为它不像css解决方案那样影响整个页面，它在一个特定的答案中使所有主体元素立即不可见。所以如果需要的话，祝你能打印整页。
我也更喜欢“display: none”方法而不是“visibility: hidden”方法，所以没有必要将可打印元素设置为绝对元素并将其对齐到左上角。但我想这是主观的。
最后，它真的打败了新的窗口方法。
