只打印<div id =“printarea”> </ div>？
如何打印指定的div（无需手动禁用页面上的所有其他内容）？
我想避免一个新的预览对话框，所以用这个内容创build一个新的窗口是没有用的。
该页面包含几个表格，其中一个表格包含我想要打印的div – 该表格的样式是针对网页的可视样式，不应该在打印中显示。
这是一个通用的解决scheme， 只使用CSS ，我已经validation了工作。
@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移动到左上angular，以便正确打印。
我用最less的代码有更好的解决scheme。
把你的可打印部分放在一个div中，像这样的一个id：
<div id="printableArea"> <h1>Print me</h1> </div> <input type="button" onclick="printDiv('printableArea')" value="print a div!" />
然后添加像onclick这样的事件（如上所示），并像上面那样传递div的id。
现在我们来创build一个非常简单的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; }
注意这是多么简单？ 没有popup窗口，没有新的窗口，没有疯狂的风格，没有像jQuery的JS库。 真正复杂的解决scheme的问题（答案并不复杂，而不是我指的）是这样一个事实，它永远不会翻译所有的浏览器！ 如果您想使样式不同，请按照选中的答案所示，将样式表链接添加到媒体属性（media =“print”）。
没有绒毛，轻便，它只是工作。
到目前为止，所有的答案都是有缺陷的 – 它们要么包括将class="noprint"添加到所有内容中，要么将会搞乱#printable内的#printable 。
我认为最好的解决办法是创build一个包装非打印的东西：
<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();
你可以使用打印样式表 ，并使用CSS来安排你想要打印的内容？ 阅读这篇文章的更多的指针。
这很好：
<style type="text/css"> @media print { body * { visibility: hidden; } #printcontent * { visibility: visible; } #printcontent { position: absolute; top: 40px; left: 30px; } } </style>
请注意，这只适用于“可视性”。 “显示”不会这样做。 在FF3中testing。
我真的不喜欢这些答案作为一个整体。 如果你有一个类（比如说printableArea），并把它作为身体的直接子对象，那么你可以在你的打印CSS中做这样的事情：
body > *:not(.printableArea) { display: none; } //Not needed if already showing body > .printableArea { display: block; }
使用可见性会导致大量间距问题和空白页面。 这是因为可视性保持了元素的空间，只是隐藏了元素的空间，显示将其删除，并允许其他元素占据其空间。
这个解决scheme工作的原因是，你没有抓住所有的元素，只是身体的直接的孩子和隐藏他们。 下面的其他解决scheme与显示CSS，隐藏所有的元素，它影响了printableArea内容的一切内容。
我不会build议JavaScript，因为你需要有一个打印button，用户点击和标准的浏览器打印button不会有相同的效果。 如果你真的需要这样做，我会做的是存储身体的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" />
-
给你想要打印的id
printMe任何元素。 -
把这个脚本包含在你的head标签中：
<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>
hm …使用样式表打印的types…例如：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css：
div { display: none; } #yourdiv { display: block; }
<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获取内容并创build了一个我可以打印的窗口。
桑德罗的方法很好。
我调整它允许允许多个printMe链接，特别是在标签页和扩展文本中使用。
function processPrint(printMe){ < – 在这里调用一个variables
var printReadyElem = document.getElementById(printMe); < – 删除了printMe附近的引号来请求一个variables
<a href="javascript:void(processPrint('divID'));">Print</a> < – 将要打印的div ID传递给函数以将printMevariables转换为div ID。 单引号是必要的
printDiv（divId） ：在任何页面上打印任何div的通用解决scheme。
我有类似的问题，但我希望（a）能够打印整个页面，或（b）打印几个特定区域中的任何一个。 我的解决scheme，由于上述多数，允许您指定要打印的任何div对象。
这个解决scheme的关键是将一个适当的规则添加到打印介质样式表中，以便打印请求的div（及其内容）。
首先，创build所需的打印CSS来压制一切（但没有特定的规则允许您要打印的元素）。
<style type="text/css" media="print"> body {visibility:hidden; } .noprintarea {visibility:hidden; display:none} .noprintcontent { visibility:hidden; } .print { visibility:visible; display:block; } </style>
请注意，我添加了新的类规则：
- noprintarea允许您禁止打印div中的元素 – 内容和块。
- noprintcontent允许您禁止打印div中的元素 – 内容被抑制，但分配的区域为空。
- 打印允许您在打印版本中显示项目，但不在屏幕上显示。 这些屏幕样式通常具有“显示：无”。
然后插入三个JavaScript函数。 第一个只是打开和closures打印介质样式表。
function disableSheet(thisSheet,setDisabled) { document.styleSheets[thisSheet].disabled=setDisabled; }
第二个真正的工作，第三个清理之后。 第二个（printDiv）激活打印介质样式表，然后添加一个新的规则以允许所需的div打印，发出打印，然后在最后的内务pipe理之前添加一个延迟（否则样式可以在打印实际上被重置之前完成）。
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删除添加的规则，并再次将打印样式设置为禁用，因此可以打印整个页面。
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。 只需从button或其他任何东西发出printDiv（“thedivid”）。
这种方法的一大优点是提供了从页面内打印选定内容的一般解决scheme。 它还允许使用现有样式打印元素 – 包括包含div。
注意：在我的实现中，这必须是第一个样式表。 如果您需要稍后在图纸顺序中更改图纸参考（0）为相应的图纸编号。
使用特殊的样式表进行打印
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
然后添加一个类，即“noprint”到您不想打印的内容的每个标签。
在CSS中使用
.noprint { display: none; }
如果你只想打印这个div，你必须使用指令：
@media print{ *{display:none;} #mydiv{display:block;} }
printDiv（）函数出现了几次，但是在这种情况下，您将释放所有绑定元素和input值。 所以，我的解决scheme是创build一个名为“body_allin”的所有东西的div，另一个名为“body_print”的第一个。
然后你调用这个函数：
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”的其他内容以外的其他内容。
请参阅CSSdevise：打印进一步的解释和例子。
@Kevin佛罗里达如果你有同一个class级的多个div，你可以像这样使用它：
<div style="display:none"> <div id="modal-2" class="printableArea"> <input type="button" class="printdiv-btn" value="print a div!" /> </div> </div>
我正在使用Colorbox的内容types
$(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); });
在我的情况下，我不得不在一个页面内打印图像。 当我使用投票解决scheme时，我有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>
你可以使用这个： http : //vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
或使用visibility:visible和visibility:hidden CSS属性和@media print{}
'display：none'将隐藏所有嵌套的'display：block'。 那不是解决办法。
我有多个图像，每个button，需要点击一个button打印每个div与图像。 如果我在浏览器中禁用了caching，则此解决scheme可以正常工作，并且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!" />
我尝试了很多提供的解决scheme，没有一个完美的工作。 他们要么失去CSS或JavaScript绑定。 我发现了一个完美而简单的解决scheme，既不会损失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>
CSS：
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(); }
