Answers:
这是一个通用的解决方案，仅使用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左上方，以便正确打印。
position:fixed改用，否则内容仍然会被抵消。但是，Chrome和Safari也会截断内容，尤其是在首页之后。所以我最后的解决方法是将目标及其 所有父母都设置为overflow:visible; position:absolute !important; top:0;left:0
#section-to-print与部分本身匹配；#section-to-print *匹配该部分的每个子元素。因此，该规则仅使该节及其所有内容可见。
我用最少的代码有了更好的解决方案。
将可打印部分放在具有以下ID的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”）来执行已检查的答案中所示的操作。
没有绒毛，重量轻，可以正常工作。
.click。很遗憾，因为代码是如此的轻巧。
到目前为止，所有答案都是有缺陷的-它们要么添加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();这很好用：
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>请注意，这仅适用于“可见性”。“显示”不会这样做。在FF3中测试。
我真的不喜欢所有这些答案。如果您有一个类（例如printableArea）并将其作为body的直接子对象，则可以在打印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;
}使用可见性会导致很多间距问题和空白页。这是因为可见性可以维持元素空间，只是将其隐藏，而当显示将其移除并允许其他元素占用其空间时。
此解决方案有效的原因是您没有抓住所有元素，而只是抓住身体的直接子孙并将它们隐藏起来。下面带有显示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" />给出您想要打印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 ...使用样式表的类型进行打印...例如：
<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;
}桑德罗的方法效果很好。
我对其进行了调整，以允许使用多个printMe链接，尤其是在选项卡式页面和扩展文本中使用。
function processPrint(printMe){ <-在此处调用变量
var printReadyElem = document.getElementById(printMe); <-删除了printMe周围的引号，以要求一个变量
<a href="javascript:void(processPrint('divID'));">Print</a><-将要打印的div ID传递给函数，以将printMe变量转换为div ID。需要单引号
printDiv（divId）：在任何页面上打印任何div的通用解决方案。
我遇到了类似的问题，但我希望（a）能够打印整个页面，或者（b）打印几个特定区域中的任何一个。由于上面的许多内容，我的解决方案允许您指定要打印的任何div对象。
此解决方案的关键是向打印介质样式表中添加适当的规则，以便将打印所请求的div（及其内容）。
首先，创建所需的打印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);
}唯一要做的另一件事是在上载处理中添加一行，以便最初禁用打印样式，从而实现整页打印。
<body onLoad='disableSheet(0,true)'>然后，您可以从文档中的任何位置打印div。只需通过按钮或其他命令发出printDiv（“ thedivid”）即可。
这种方法的一大优点是它提供了一种通用的解决方案，可以从页面内打印选定的内容。它还允许将现有样式用于打印的元素-包括包含的div。
注意：在我的实现中，这必须是第一个样式表。如果您需要稍后在工作表顺序中将工作表参考（0）更改为适当的工作表编号。
@Kevin Florida如果您有多个同班同学，可以这样使用：
<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>函数printDiv（）出现了几次，但是在这种情况下，您将松开所有绑定元素和输入值。因此，我的解决方案是为所有名为“ 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”的内容以外的所有其他内容。
有关更多说明和示例，请参见CSS设计：印刷。
我有多个图像，每个图像都有一个按钮，需要单击一个按钮才能在每个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!" />在不影响当前页面的情况下又进行了一次批准，并且在打印时也保留了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或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元素之间移动，并且通常对原始文档无害。
或使用visibility:visible和visibility:hidden CSS属性一起使用@media print{}
'display：none'将隐藏所有嵌套的'display：block'。那不是解决方案。
我找到了解决方案。
@media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
@page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}基于@Kevin Florida的答案，我提出了一种避免由于覆盖内容而禁用当前页面上的脚本的方法。我使用了另一个名为“ printScreen.php”（或.html）的文件。将要打印的所有内容包装在div“ printSource”中。使用javascript，打开之前创建的新窗口（“ printScreen.php”），然后在顶部窗口的“ printSource”中获取内容。
这是代码。
主视窗：
echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";
//add button or link to print
echo "<button id='btnPrint'>Print</button>";
<script>
$("#btnPrint").click(function(){
printDiv("printSource");
});
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
}
</script>这是“ printScreen.php”-抓取要打印内容的其他文件
<head>
// write everything about style/script here (.css, .js)
</head>
<body id='mainBody'></body>
</html>
<script>
//get everything you want to print from top window
src = window.opener.document.getElementById("printSource").innerHTML;
//paste to "mainBody"
$("#mainBody").html(src);
window.print();
window.close();
</script>