【发布时间】：2010-12-07 06:19:38
【问题描述】：
我有两个 div：div1 和 div2。
保持应用于正在打印的 div2 元素的原始 css 样式。
我不想打印div1 内部的内容，而只想打印div2 内部的内容。
如何打印？
【问题讨论】：
标签： javascript jquery jquery-plugins
【发布时间】：2010-12-07 06:19:38
【问题描述】：
试试这个
<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
【讨论】：
-
您必须为 ipad 处理它，例如：@media only screen and (max-width:768px){...your style here.....} etc.
如果您不想打印整页，可以使用我的以下解决方案从您的网页打印特定的 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>
【讨论】：
-
演示坏了
<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>
【讨论】：
-
@ChrisHappy 我相信这可能是由于 document.body.innerHTML 被替换时事件侦听器被删除/丢失
-
@DanTheMan 是的，你是对的，但我们该如何解决呢？
您只能打印整个页面，而不是页面的一部分。因此，有两种选择，您可以将一个元素的内容复制到新页面并打印，或者阻止打印另一个元素。
您可以使用媒体 css 隐藏一个元素以防止打印。示例：
@media print {
.div1 { display: none; }
}
【讨论】：
查看 jQuery 的 jqPrint 插件：http://plugins.jquery.com/project/jqPrint
【讨论】：
你也可以使用 jQuery：
<script>
function printArea(){
$('body').css('visibility', 'hidden');
$('.div2').css('visibility', 'visible');
window.print();
}
</script>
【讨论】：
-
我怀疑你可以隐藏身体然后在里面展示一些东西
我在使用 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>
【讨论】：
-
很高兴看到您发布答案！请记住，您应该添加一些有关您修复的内容或正确原因的详细信息。它可以帮助用户了解正在发生的事情，而不仅仅是为用户提供答案。将其视为您所有答案的规则。我希望你玩得开心。
-
感谢您的建议。在帖子中添加了更多内容。
简单的方法
@media print {
body > div { display:none; }
body .div { display:block; }
}
【讨论】：
.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }
function classToggle() {
$('#div1').addClass('class-toggle');
}
classToggle();
然后您可以使用事件处理程序来处理您想要的方式和时间 打印输出。
【讨论】：
使用 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>
【讨论】：
<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>
【讨论】：