如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。
参见CSS设计:准备打印以获得更多的解释和示例。
其他回答
桑德罗的方法很有效。
我对它进行了调整，以允许多个printMe链接，特别是在选项卡页面和扩展文本中使用。
function processPrint(printMe){<——在这里调用一个变量
var printReadyElem = document.getElementById(printMe);<——删除了printMe周围的引号以请求一个变量
< a href = " javascript:无效(processPrint (' divID '));>Print</a> <——将要打印的div ID传递到函数上，将printMe变量转换为div ID。需要单引号
基于@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>
我拿起使用JavaScript的内容，并创建了一个窗口，我可以打印代替…
我找到了解决办法。
@media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
@page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}
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";
}
