我有两个div：div1和div2。
维护应用于正在打印的div2元素的原始css样式。
我不想在div1内打印内容，只打印div2内的内容。
如何打印？
答案 0 :(得分：39)
试试这个
<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
答案 1 :(得分：19)
使用我的以下解决方案，如果您不想打印整页，可以从网页上打印特定的div内容。
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'new div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="yourdiv">
Div you want to print. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<div>
This will not be printed.
</div>
<div id="anotherdiv">
Nor will this.
</div>
<input type="button" value="Print" onclick="PrintElem('#yourdiv')" />
</body>
</html>
答案 2 :(得分：4)
<script type="text/javascript">
function printDiv() {
var printContents = document.getElementById('Your printable div').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
答案 3 :(得分：3)
您只能打印整页，而不能打印一页。因此，有两个选项，您可以将一个元素的内容复制到一个新页面并打印，或者阻止打印另一个元素。
您可以使用媒体css隐藏打印中的一个元素。例如：
@media print {
.div1 { display: none; }
}
答案 4 :(得分：2)
查看jQuery的jqPrint插件：http://plugins.jquery.com/project/jqPrint
答案 5 :(得分：1)
我在使用 window.print() 打印 div（HTML 的一部分）时遇到了很多问题。使用下面的方法，它可以在 edge、chrome 和 Mozilla 中无缝工作。下面的函数如何帮助缓解我面临的问题是通过使用 iframe。当使用 window.print() 而不使用以下代码时，它会打印大部分页面设计以及我们不想要的所有内容。也有许多基于 CSS 的选项，但最终下面的这个对我有用。从下面的代码“frameDoc.document.write........ frameDoc.document.close();”正在控制也可以在打印预览中看到的格式。
function printDiv(id) {
var contents = document.getElementById(id).innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write("<html><head>\n\n " +
"<style type=\"text/css\" media=\"print\">\n " +
"@@page\n {\n " +
"size: auto; /* auto is the initial value */\n " +
"margin: 10mm; /* this affects the margin in the printer settings */\n " +
" }\n\n html\n {\n " +
" background-color: #FFFFFF;\n " +
" }\n\n body\n " +
" { font-family:\"Times New Roman\", Times, serif;\n " +
" border: none ;\n " +
" margin: 0; /* margin you want for the content */\n " +
" }\n .table {\n width: 100%;\n " +
" max-width: 100%;\n margin-bottom: 20px;\n " +
" border-collapse: collapse;\n " +
" background-color: transparent;\n display: table;\n " +
" }\n .table-bordered {\n " +
" border: 1px solid #ccc;\n }\n tr {\n " +
" display: table-row;\n vertical-align: inherit;\n " +
" border-color: inherit;\n padding:15px;\n }\n " +
" .table-bordered tr td {border: 1px solid #ccc!important; padding:15px!important;}\n " +
" </style><title></title></head><body>".concat(contents, "</body>"));
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
这样称呼
<a href="#" onclick="javascript:printDiv('divwithcontenttoprint')"> Print </a>
答案 6 :(得分：0)
简单方法
@media print {
body > div { display:none; }
body .div { display:block; }
}
答案 7 :(得分：0)
您也可以使用jQuery：
<script>
function printArea(){
$('body').css('visibility', 'hidden');
$('.div2').css('visibility', 'visible');
window.print();
}
</script>
答案 8 :(得分：0)
.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }
function classToggle() {
$('#div1').addClass('class-toggle');
}
classToggle();
然后你可以使用事件处理程序来处理你想要的方式和时间 打印输出。
答案 9 :(得分：-1)
使用PrintArea jQuery插件打印特定的div内容。我从这里找到了简单的集成指南 - How to print a specific area of the web page using jQuery
您只需使用以下代码即可使用PrintArea jQuery插件。
<script>
$(document).ready(function(){
$("#printButton").click(function(){
var mode = 'iframe';
var close = mode == "popup";
var options = { mode : mode, popClose : close};
$("div.printableArea").printArea( options );
});
});
</script>
答案 10 :(得分：-1)
<script type="text/javascript">
function printDiv() {
var printContents = document.getElementById('Your printable div').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>