如何打印指定的div（无需手动禁用页面上的所有其他内容）？
我想避免使用新的预览对话框，因此使用此内容创建新窗口无用。
该页面包含几个表格，其中一个表格包含我要打印的div - 该表格采用网页的视觉样式设计，不应该以打印方式显示。
这是一个通用的解决方案，仅使用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，那么它的后代都不会显示。要使用它，您必须更改页面的结构。
使用visibility效果更好，因为您可以打开后代的可见性。隐形元素仍会影响布局，所以我将section-to-print移动到左上方，以便正确打印。
<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>
第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>
使用CSS 3，您可以使用以下内容：
body *:not(#printarea) {
display: none;
}
我使用JavaScript获取内容并创建了一个可以打印的窗口...
桑德罗的方法效果很好。
我调整它以允许允许多个printMe链接，特别是在选项卡页面和扩展文本中使用。
function processPrint(printMe){
var printReadyElem = document.getElementById(printMe);
<a href="javascript:void(processPrint('divID'));">Print</a>
print Div（divIde）：在任何页面上打印任何div的通用解决方案。
我有类似的问题，但我希望（a）能够打印整个页面，或（b）打印几个特定区域中的任何一个。由于上述大部分原因，我的解决方案允许您指定要打印的任何div对象。
此解决方案的关键是在打印介质样式表中添加适当的规则，以便打印所请求的div（及其内容）。
首先，创建所需的print css以抑制所有内容（但没有允许您要打印的元素的特定规则）。
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
请注意，我添加了新的类规则：
然后插入三个JavaScript函数。第一个只是打开和关闭打印介质样式表。
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
第二个是真正的工作，第三个是后来清理。第二个（printDiv）激活打印介质样式表，然后附加新规则以允许打印所需的div，发出打印，然后在最终管理之前添加延迟（否则样式可以在打印之前重置完成）。
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
最终功能删除添加的规则并再次将打印样式设置为禁用，以便打印整个页面。
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
唯一要做的是在onload处理中添加一行，以便最初禁用打印样式，从而允许整页打印。
<body onLoad='disableSheet(0,true)'>
然后，从文档中的任何位置，您都可以打印div。只需从按钮或其他任何地方发出printDiv（“thedivid”）。
这种方法的一大优点是它提供了从页面内打印所选内容的通用解决方案。它还允许对打印的元素使用现有样式 - 包括包含div。
注意：在我的实现中，这必须是第一个样式表。如果您需要稍后在工作表序列中进行更改，请将工作表参考（0）更改为相应的工作表编号。
@Kevin Florida如果您有多个具有相同类的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个空白页面，另一个显示图像。希望它会帮助某人。
这是我使用的CSS：
@media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}
我的HTML是：
<div id="not-print" >
<header class="row wrapper page-heading">
</header>
<div class="wrapper wrapper-content">
<%= image_tag @qrcode.image_url, size: "250x250" , alt: "#{@qrcode.name}" %>
</div>
</div>
<div id="to-print" style="display: none;">
<%= image_tag @qrcode.image_url, size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
使用特殊样式表进行打印
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
然后在每个标签中添加一个类，即“noprint”，这是您不想打印的内容。
在CSS中使用
.noprint {
display: none;
}
如果您只想打印此div，则必须使用以下指令：
@media print{
*{display:none;}
#mydiv{display:block;}
}
用最少的代码我有一个更好的解决方案。
将您的可打印部分放在一个id为div的div中：
<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”）来执行已检查答案中所示的操作。
没有绒毛，轻巧，它只是工作。
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";
}
您可以使用单独的CSS样式来禁用除id为“printarea”的内容之外的所有其他内容。
有关进一步说明和示例，请参阅CSS Design: Going to Print。
我有多个图像，每个图像都有一个按钮，需要点击一个按钮，用图像打印每个div。如果我在浏览器中禁用了缓存，并且Chrome中的图像大小没有变化，则此解决方案有效：
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
还有一个approch不会影响当前页面，它也会在打印时保持css。这里选择器必须是特定的div选择器，我们需要打印哪些内容。
printWindow(selector, title) {
var divContents = $(selector).html();
var $cssLink = $('link');
var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth * 0.6);
printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
for(var i = 0; i<$cssLink.length; i++) {
printWindow.document.write($cssLink[i].outerHTML);
}
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload = function () {
printWindow.focus();
setTimeout( function () {
printWindow.print();
printWindow.close();
}, 100);
}
}
这里提供了一些时间显示外部css应用于它。
适合空间空高的最佳css：
@media print {
body * {
visibility: hidden;
height:0;
}
#section-to-print, #section-to-print * {
visibility: visible;
height:auto;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
我尝试了许多提供的解决方案。他们中没有一个完美地工作。他们要么丢失CSS或JavaScript绑定。我找到了一个完美而简单的解决方案，既不会损失CSS也不会损失JavaScript绑定。
HTML：
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
使用Javascript：
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
我参加这个派对的时间已经很晚了，但是我还想采用另一种方法。我写了一个名为PrintElements的小型JavaScript模块，用于动态打印网页的各个部分。
它通过迭代选定的节点元素来工作，并且对于每个节点，它遍历DOM树直到BODY元素。在每个级别，包括初始级别（即要打印的节点级别），它将标记类（pe-preserve-print）附加到当前节点。然后将另一个标记类（pe-no-print）附加到当前节点的所有兄弟节点，但前提是它们上没有pe-preserve-print类。作为第三幕，它还附加了另一个类来保存祖先元素pe-preserve-ancestor。
一个死的简单的补充打印专用css将隐藏和显示各自的元素。这种方法的一些好处是所有样式都被保留，它不会打开一个新窗口，不需要移动很多DOM元素，并且通常它是非侵入性的原始文档。
请参阅demo，或阅读相关文章for further details。
或者使用visibility:visible和visibility:hidden css属性以及@media print{}
'display：none'将隐藏所有嵌套的'display：block'。那不是解决方案。
到目前为止所有的答案都是相当有缺陷的 - 他们要么将class="noprint"添加到所有内容中，要么将display中的#printable搞乱。
我认为最好的解决方案是围绕不可打印的东西创建一个包装器：
<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>
当然这并不完美，因为它涉及到你的HTML中移动一些东西......
使用jQuery，它就像这样简单：
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
你可以使用print stylesheet，并使用CSS来安排你想要打印的内容吗？ Read this article更多指针。
这很好用：
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>
请注意，这仅适用于“可见性”。 “显示”不会这样做。在FF3中测试过。
我并不喜欢这些答案中的任何一个。如果你有一个类（比如printableArea）并将它作为body的直接子项，那么你可以在你的print CSS中做这样的事情：
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
使用可见性可能会导致很多间距问题和空白页面。这是因为可见性维护元素空间，只是使其隐藏，显示将其移除，并允许其他元素占用其空间。
这个解决方案的工作原理是你不是抓住所有元素，只是身体的直接孩子并隐藏它们。下面的其他解决方案使用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" />
printMe的任何元素。<script language="javascript">
var gAutoPrint = true;
function processPrint(){
if (document.getElementById != null){
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null){
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0) html += headTags[0].innerHTML;
}
html += '\n</HE' + 'AD>\n<BODY>\n';
var printReadyElem = document.getElementById("printMe");
if (printReadyElem != null) html += printReadyElem.innerHTML;
else{
alert("Error, no contents.");
return;
}
html += '\n</BO' + 'DY>\n</HT' + 'ML>';
var printWin = window.open("","processPrint");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint) printWin.print();
} else alert("Browser not supported.");
}
</script>
<a href="javascript:void(processPrint());">Print</a>
嗯...使用样式表的类型进行打印...例如：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css：
div { display: none; }
#yourdiv { display: block; }