如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
window.print();
document.body.innerHTML = originalContents;
}
</script>
其他回答
我有一个用最少代码更好的解决方案。
把你的可打印部分放在一个div中，像这样的id:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
然后添加一个事件，如onclick(如上所示)，并像上面所做的那样传递div的id。
现在让我们创建一个非常简单的javascript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
注意到这有多简单了吗?没有弹出窗口，没有新窗口，没有疯狂的样式，没有像jquery这样的JS库。真正复杂的解决方案(答案并不复杂，也不是我指的)的问题是，它永远不会在所有浏览器上转换，永远!如果您想让样式有所不同，可以按照选中的答案所示，将media属性添加到样式表链接(media="print")。
没有绒毛，重量很轻，很好用。
这里有一个通用的解决方案，只使用CSS，我已经验证工作。
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
其他方法都不太好。使用display很棘手，因为如果任何元素都没有display:none，那么它的后代也不会显示。要使用它，您必须更改页面的结构。
使用可见性效果更好，因为您可以为后代打开可见性。但是，不可见的元素仍然会影响布局，所以我将section-to-print移到左上角，以便正确打印。
总的来说，这些答案我都不太喜欢。如果你有一个类(比如printableArea)，并把它作为body的直接子类，那么你可以在你的print CSS中这样做:
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
对于那些在其他地方寻找printableArea的人，你需要确保显示printableArea的父元素:
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
使用可见性可能会导致大量间距问题和空白页面。这是因为可见性保持了元素的空间，只是将其隐藏起来，而在显示时将其移除，并允许其他元素占用其空间。
这个解决方案有效的原因是您不需要抓取所有元素，只需要将body的直接子元素隐藏起来。下面的其他解决方案使用display css，隐藏所有元素，这将影响printableArea内容内的所有内容。
我不建议使用javascript，因为你需要有一个用户点击的打印按钮，而标准的浏览器打印按钮不会有同样的效果。如果你真的需要这样做，我会做的是存储主体的html，删除所有不需要的元素，打印，然后添加回html。如前所述，我将避免这种情况，如果你可以和使用CSS选项如上所述。
注意:你可以添加任何CSS到打印CSS使用内联样式:
<style type="text/css">
@media print {
//styles here
}
</style>
或者像我通常使用的链接标签:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
@Kevin佛罗里达 如果你有同一个类的多个div，你可以这样使用它:
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>
我使用的是Colorbox内内容类型
$(document).on('click', '.printdiv-btn', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $('body').html();
var printArea = $this.parents('.printableArea').html();
$('body').html(printArea);
window.print();
$('body').html(originalContent);
});
步骤1:在head标记中编写以下javascript代码
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
步骤2:通过onclick事件调用PrintMe('DivID')函数。
<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
