如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
到目前为止，所有的答案都是有缺陷的——它们要么涉及在所有内容中添加class="noprint"，要么会在#printable中混乱显示。
我认为最好的解决方案是在不可打印的东西周围创建一个包装器:
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
当然，这并不是完美的，因为它涉及到在HTML中移动一些东西……
其他回答
试试这个:
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”方法，所以没有必要将可打印元素设置为绝对元素并将其对齐到左上角。但我想这是主观的。
最后，它真的打败了新的窗口方法。
另一种不影响当前页面的方法，它还在打印时持久化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被应用到它。
没有CSS小丑，html和纯javascript与iframe工作最好。然后只需点击文本，你想打印。带有文本内容的id元素的当前示例;
html的身体:
<div id="monitor" onclick="idElementPrint()">text i want to print</div>
纯javascript:
//or: monitor.textContent = "click me to print textual content";
const idElementPrint = () => {
let ifram = document.createElement("iframe");
ifram.style = "display:none";
document.body.appendChild(ifram);
pri = ifram.contentWindow;
pri.document.open();
pri.document.write(monitor.textContent);
pri.document.close();
pri.focus();
pri.print();
}
我有一个用最少代码更好的解决方案。
把你的可打印部分放在一个div中，像这样的id:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
然后添加一个事件，如onclick(如上所示)，并像上面所做的那样传递div的id。
现在让我们创建一个非常简单的javascript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
注意到这有多简单了吗?没有弹出窗口，没有新窗口，没有疯狂的样式，没有像jquery这样的JS库。真正复杂的解决方案(答案并不复杂，也不是我指的)的问题是，它永远不会在所有浏览器上转换，永远!如果您想让样式有所不同，可以按照选中的答案所示，将media属性添加到样式表链接(media="print")。
没有绒毛，重量很轻，很好用。
打印特定Div或任何元素的最佳方法
printDiv("myDiv");
function printDiv(id){
var printContents = document.getElementById(id).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
