的JavaScript
<script type="text/javascript">
function printDiv() {
var printContent1 = document.getElementById('divMail1');
var printContent2 = document.getElementById('divMail2');
var newWin = window.open('', 'PrintWindow', 'width=800,height=530,top=10,left=100,scrollbars=1,resizable=yes');
newWin.document.open();
newWin.document.write('<html/><body onload="window.print()">' + printContent1.innerHTML + '</body></html>');
newWin.document.close();
}
</script>
HTML
<div id="divMail1">
<div>
<img src="image1.jpg"/>
</div>
<div>
<img src="image2.jpg"/>
</div>
<div id="divMail2">
<div>
<img src="image3.jpg"/>
</div>
<div>
<img src="image4.jpg"/>
</div>
</div>
<input type="button" value="Print" onclick="printDiv()"/>
嗨,我想在打印预览中显示一个div(divMail1)并打印另一个div(divMail2)。可能吗。请帮帮我。
答案 0 :(得分:2)
只能使用CSS
<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>
答案 1 :(得分:1)
您可以通过添加print.css
来使用media="print"
,而不是使用JavaScript。因此,在您的主CSS中,您需要添加以下内容:
.print-only {display: none;}
.do-not-print {display: block;}
在print.css
:
.print-only {display: block;}
.do-not-print {display: none;}
在您的情况下,主CSS中的代码将是:
#divMail1 {display: block;}
#divMail2 {display: none;}
在print.css
:
#divMail1 {display: none;}
#divMail2 {display: block;}
答案 2 :(得分:0)
使用css代替
#divMail1 {
display: block;
}
#divMail2 {
display: none;
}
@media print {
#divMail1 {
display: none;
}
#divMail2 {
display: block;
}
}