如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
另一种不影响当前页面的方法，它还在打印时持久化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被应用到它。
其他回答
打印特定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;
}
使用jQuery，它就像这样简单:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
没有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();
}
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";
}
基于@Kevin Florida的回答，我做了一种方法来避免当前页面上的脚本因为覆盖内容而禁用。我使用其他文件称为“printScreen.php”(或。html)。把你想打印的所有东西都包装在一个div“printSource”中。用javascript，打开一个你之前创建的新窗口(“printScreen.php”)，然后在顶部窗口的“printSource”中抓取内容。
这是代码。
主窗口:
echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";
//add button or link to print
echo "<button id='btnPrint'>Print</button>";
<script>
$("#btnPrint").click(function(){
printDiv("printSource");
});
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
}
</script>
这是“printScreen.php”-另一个文件抓取内容打印
<head>
// write everything about style/script here (.css, .js)
</head>
<body id='mainBody'></body>
</html>
<script>
//get everything you want to print from top window
src = window.opener.document.getElementById("printSource").innerHTML;
//paste to "mainBody"
$("#mainBody").html(src);
window.print();
window.close();
</script>
