只打印 <div id="printarea"></div>？
Posted
技术标签:
【中文标题】只打印 <div id="printarea"></div>？【英文标题】：Print <div id="printarea"></div> only? 【发布时间】：2010-10-02 21:41:41 【问题描述】：如何打印指定的 div（无需手动禁用页面上的所有其他内容）？
我想避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含几个表格，其中一个包含我要打印的 div - 该表格的样式是 Web 的视觉样式，不应在打印中显示。
【问题讨论】：
***.com/questions/2255291/…这个链接完美 【参考方案1】：这是一个通用的解决方案，使用 CSS only，我已经验证它可以工作。
@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 移动到左上角以便正确打印。
【讨论】：
这是迄今为止最快最干净的方法，我想知道为什么这个答案没有得到最多的选票-.- 使用此解决方案需要注意的一个问题是，在某些情况下，您最终可能会打印数千个空白页。在我的情况下，我能够通过对选定项目使用一些额外的 display:none 样式来解决这个问题，但也许更通用的解决方案可以通过强制高度、溢出：none 和所有 div 或其他东西的绝对定位的某种组合来实现。跨度> 这是一个很好的开始，但我遇到了两个问题：如果元素的任何父级建立了自己的相对/绝对定位，则内容仍然会偏移，除非我改用position:fixed。但是，Chrome 和 Safari 也会截断内容，尤其是在第一页之后。所以我最后的解决方法是将目标 和 所有它的父母都设置为overflow:visible; position:absolute !important; top:0;left:0
@dudeNumber4 #section-to-print 匹配该部分本身； #section-to-print * 匹配该部分的每个子元素。因此，该规则只会使该部分及其所有内容可见。
您可以尝试 javascript 解决方案，但如果您的用户使用浏览器的打印命令，这将不起作用。【参考方案2】：
我有一个更好的解决方案，代码最少。
将您的可打印部分放置在具有如下 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"）。
没有绒毛，轻巧，它只是工作。
【讨论】：
@Kevin 我试试这个表格，但它打印空表格（没有数据），我需要在提交之前打印一个填写好的表格 @asprin 警告！这不是乱七八糟的代码。使用 innerHTML 清除然后重新创建整个主体对于简单页面来说很好，但使用更高级的自定义（菜单、幻灯片等）它可能会清除其他脚本添加的一些动态行为。 此解决方案不适用于可打印区域中的元素取决于父元素的样式和/或位置的任何复杂页面。如果您提取可打印的 div，它可能看起来完全不同，因为现在所有的父母都不见了。 遗憾的是，如果您关闭打印预览窗口然后尝试执行 jQuery.click，Chrome 无法正常工作。真可惜，因为代码太轻量级了。
@BorisGappov 一个非常简单的示例，只需单击一下即可证明我的观点：jsfiddle.net/dc7voLzt 我再说一遍：这不是无杂乱的代码！问题不在于打印本身，而在于恢复原始页面！【参考方案3】：
到目前为止，所有答案都存在相当大的缺陷 - 它们要么涉及将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 中移动一些东西...
【讨论】：
我认为你是对的，但是我如何杀死围绕 div 的表格的样式（如果可以删除样式 - 我可以打印表格并完全排除其余内容轻松 我使用 Javascript 来获取所需的内容和上面的 CSS 我更喜欢使用语义 HTML。理想情况下，打印格式应由 CSS 处理。请参阅我的答案以了解如何执行此操作：***.com/questions/468881/… 同意 Bennett 的观点，使用可见性而不是显示是一种更简洁的解决方案 我在这个线程的较低位置做了一个非常简单的解决方案，我认为它会更好地满足提问者的需求。它不依赖于打印样式表，可以在您的整个网站上回收，并且非常轻巧。【参考方案4】：使用 jQuery 就这么简单：
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
【讨论】：
这很酷，尽管它在 Chrome 中显示为被阻止的弹出窗口。 诀窍是在用户生成的事件（例如鼠标单击）上调用它。您也可以在第一行之后添加：if(!w)alert('Please enable pop-ups'); 有没有人在 IE11 上进行过这项工作？它只是打开一个窗口，然后立即关闭它。可在 Chrome、FF 和 safari 中使用。 我用这个打印时丢失了css，有什么办法可以维护css吗？ @MoxetKhan，这篇文章有一个css解决方案vevlo.com/how-to-print-div-content-using-javascript【参考方案5】：您可以使用print stylesheet，并使用 CSS 来安排您想要打印的内容吗？ Read this article 获取更多指针。
【讨论】：
我确实有一个打印样式表 - 试图避免在所有其他内容中添加样式规则... 我确实有一个带有样式的表格，包含有问题的 div，如果我将表格设置为 display:none - 我还能显示 div 吗？ 我认为是的，您可以尝试将规则标记为 !important 以提升它！ 如果表格没有显示，即使 div 设置为 'display: awesome;' 也没关系。父母是隐藏的，孩子也是如此。这是您需要表格的情况还是仅用于页面布局？ “轰隆隆，爆头！”按表格布局。 =|【参考方案6】：作为一个整体，我真的不喜欢这些答案中的任何一个。如果您有一个类（例如 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;
使用可见性会导致很多间距问题和空白页。这是因为可见性保持元素空间，只是使其隐藏，而显示将其移除并允许其他元素占用其空间。
此解决方案有效的原因是您没有抓取所有元素，只是抓取 body 的直接子元素并隐藏它们。下面使用显示 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" />
【讨论】：
如果您要打印的 div 不是“body 的直接子代”怎么办？我正在尝试在 vue.js 中执行此操作。但是在使用接受的答案时，我得到了很多空白页。 @svenema，你可以使用任何你想要的 CSS。这只是一个例子。 嗯，仍然，当我尝试这个时，确实没有额外的空白页，但 printableArea div 也没有显示；使用此代码时，我只有 1 个空白页。 我发现这确实是因为 printableArea div 不是 body 标签的直接子元素，当我将其设为直接子元素时，您的解决方案有效；但是，就我而言，我不能将 printableArea 设为直接子级。有没有办法解决这个问题？ still.. 当 printableArea div not 是 body 标记的直接子级时，我只会得到一个空白页。您能否发布一个完整的示例？【参考方案7】：给任何你想打印的元素，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>
【讨论】：
这是一份好工作。但是太复杂了，无法跨浏览器正常工作（尤其是旧浏览器）。我建议你看看下面我的解决方案。【参考方案8】：第 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('acolor:#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>
【讨论】：
就是这个！将它用于模态和画廊。关闭后没有 Javascript 错误。真的很有帮助，尤其是当您使用超过一页的模式时。很好地把它包起来。非常适合想要打印存储的人。 感谢@TheWeeezel【参考方案9】：<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>
【讨论】：
看起来不错，但打印后您会丢失所有 javascript 绑定和其他内容 它是在没有 css 的情况下打印的。【参考方案10】：hm ...使用样式表的类型进行打印...例如：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css：
div display: none;
#yourdiv display: block;
【讨论】：
如果文档不是基于 DIV 或 #yourdiv 还包含更多 DIV，则此方法无效。 #yourdiv * display: ... 如果您将其放在页面顶部并拥有最新的浏览器，您可以使用更多选择器来隐藏非 div 跨度> "#yourdiv * display: ... " - 在不破坏布局的情况下 ... 应该是什么？ 这会将内联元素也显示为块元素。但是“#yourdiv, #yourdiv div display:block ”会做到这一点。 @dittodhole - 想一想。您可以在其中放置什么不会破坏#yourdiv 中的布局？【参考方案11】：打印特定 Div 或任何元素的最佳方式
printDiv("myDiv");
function printDiv(id)
var printContents = document.getElementById(id).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
【讨论】：
【参考方案12】：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>
注意我添加了新的类规则：
noprintarea 允许您禁止打印 div 中的元素 - 内容和块。 noprintcontent 允许您禁止打印 div 中的元素 - 内容被禁止但分配的区域为空。 print 允许您拥有显示在打印版本中的项目，但 不在屏幕页面上。这些屏幕样式通常具有“display:none”。然后插入三个 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) 更改为适当的图纸编号。
【讨论】：
【参考方案13】：使用 CSS 3，您可以使用以下内容：
body *:not(#printarea)
display: none;
【讨论】：
恐怕不能使用...（如果错了请纠正我）我正在处理的页面是 asp.net 1.1 / DHTML :not() 选择器是否已经可用取决于浏览器。 那么我的建议只是展望未来……不，说真的。为了完整起见，我只是提到了它。我知道现在不可行。不幸的是。 你可以使用 jQuery 和这个（我认为）可以在 IE6 中工作的选择器 - $('body *:not(#printarea)').style('display', 'none'); 这将隐藏#printarea 的所有后代，因为它们由*:not(#printarea) 匹配。所以基本上你会得到一个空容器。【参考方案14】：我使用 JavaScript 获取内容并创建了一个可以打印的窗口...
【讨论】：
可以分享一下代码吗，有css的问题【参考方案15】：Sandro 的方法效果很好。
我对其进行了调整以允许多个 printMe 链接，特别是用于标签页和扩展文本。
function processPrint(printMe)
var printReadyElem = document.getElementById(printMe);
<a href="javascript:void(processPrint('divID'));">Print</a>
【讨论】：
【参考方案16】：@凯文佛罗里达 如果你有多个具有相同类的 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);
);
【讨论】：
【参考方案17】：就我而言，我必须在页面内打印图像。当我使用投票的解决方案时，我有 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>
【讨论】：
【参考方案18】：在不影响当前页面的情况下，它还可以在打印时保留 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 有时需要一些时间来加载，这种方法是我希望在打印之前重新加载页面的方法。谢谢【参考方案19】：适合空间空白高度的最佳 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;
【讨论】：
【参考方案20】：没有 CSS 小丑，带有 iframe 的 html 和纯 javascript 工作得最好。然后只需单击要打印的文本。带有文本内容的 id 元素的当前示例；
html 正文：
<div id="monitor" onclick="idElementPrint()">text i want to print</div>
纯javascript：
//or: monitor.textContent = "click me to print textual content";
const idElementPrint = () =>
let ifram = document.createElement("iframe");
ifram.style = "display:none";
document.body.appendChild(ifram);
pri = ifram.contentWindow;
pri.document.open();
pri.document.write(monitor.textContent);
pri.document.close();
pri.focus();
pri.print();
【讨论】：
【参考方案21】：如果只想打印这个div，必须使用指令：
@media print
*display:none;
#mydivdisplay:block;
【讨论】：
【参考方案22】：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";
【讨论】：
如果您想要唯一的 id，此行可能很有用： printContents = printContents.replace(/id=("|')(.*?)("|')/g, 'id=$1 $2_2$3');【参考方案23】：您可以使用单独的 CSS 样式来禁用除 ID 为“printarea”的内容之外的所有其他内容。
请参阅CSS Design: Going to Print 了解更多说明和示例。
【讨论】：
更新了指向新位置的链接。发表评论而不是投反对票会很好。【参考方案24】：我尝试了许多提供的解决方案，但没有一个能完美运行。他们要么失去 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();
【讨论】：
此打开和创建另一个在 android 上不起作用的窗口。只有直接的 window.print() 有效。【参考方案25】：我参加这个聚会很晚了，但我想用另一种方法加入。我编写了一个名为 PrintElements 的小型 JavaScript 模块，用于动态打印网页的某些部分。
它通过迭代选定的节点元素来工作，对于每个节点，它会向上遍历 DOM 树直到 BODY 元素。在每个级别，包括初始级别（即要打印的节点的级别），它都将标记类（pe-preserve-print）附加到当前节点。然后将另一个标记类 (pe-no-print) 附加到当前节点的所有兄弟姐妹，但前提是它们上没有 pe-preserve-print 类。作为第三幕，它还将另一个类附加到保留的祖先元素pe-preserve-ancestor。
一个非常简单的补充打印 CSS 将隐藏和显示相应的元素。这种方法的一些好处是保留了所有样式，它不会打开新窗口，不需要移动大量 DOM 元素，而且通常不会侵入您的原始文档。
见demo，或阅读相关文章for further details。
【讨论】：
【参考方案26】：我找到了解决办法。
@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;
【讨论】：
【参考方案27】：It's better solution. You can use it Angualr/React
HTML
<div class="row" id="printableId">
Your html
</div>
Javascript
function printPage()
var printHtml = window.open('', 'PRINT', 'height=400,width=600');
printHtml.document.write('<html><head>');
printHtml.document.write(document.getElementById("printableId").innerHTML);
printHtml.document.write('</body></html>');
printHtml.document.close();
printHtml.focus(); = 10*/
printHtml.print();
printHtml.close();
return true;
【讨论】：
【参考方案28】：使用特殊的样式表进行打印
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
然后为每个标签添加一个类，即“noprint”，这是您不想打印的内容。
在CSS中使用
.noprint
display: none;
【讨论】：
【参考方案29】：你可以使用这个： 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'。这不是解决方案。
【讨论】：
【参考方案30】：我有多个图像，每个图像都有一个按钮，需要单击一个按钮来打印每个带有图像的 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!" />
【讨论】：
以上是关于只打印 <div id="printarea"></div>？的主要内容，如果未能解决你的问题，请参考以下文章