如何打印指定的div（不手动禁用页面上的所有其他内容）？
我想避免使用新的预览对话框，因此使用此内容创建新窗口无用。
该页面包含几个表格，其中一个表格包含我要打印的div - 该表格采用网页的视觉样式设计，不应该以打印方式显示。
答案 0 :(得分：676)
以下是使用仅限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移到左上方，以便正确打印。
答案 1 :(得分：218)
我用最少的代码获得了更好的解决方案。
将您的可打印部分放在一个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”）来执行已检查答案中所示的操作。
没有绒毛，轻巧，它只是有效。
答案 2 :(得分：117)
到目前为止，所有答案都存在相当大的缺陷 - 他们要么将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中移动一些东西......
答案 3 :(得分：105)
使用jQuery就像这样简单：
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
答案 4 :(得分：21)
您可以使用print stylesheet，并使用CSS来排列您想要打印的内容吗？ Read this article获取更多指示。
答案 5 :(得分：19)
这很有效：
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>
请注意，这仅适用于“可见性”。 “显示”不会这样做。在FF3中测试过。
答案 6 :(得分：13)
我并不喜欢这些答案中的任何一个。如果你有一个类（比如printableArea）并将它作为body的直接子项，那么你可以在你的打印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" />
答案 7 :(得分：8)
提供您要打印身份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>
答案 8 :(得分：6)
hm ...使用样式表的类型进行打印......例如：
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css：
div { display: none; }
#yourdiv { display: block; }
答案 9 :(得分：6)
<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>
答案 10 :(得分：6)
第1步：在头标记中写下以下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>
答案 11 :(得分：4)
打印特定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 :(得分：2)
我使用JavaScript获取内容并创建了一个可以打印的窗口......
答案 13 :(得分：2)
printDiv（divId）：在任何页面上打印任何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）更改为相应的工作表编号。
答案 14 :(得分：2)
使用CSS 3，您可以使用以下内容：
body *:not(#printarea) {
display: none;
}
答案 15 :(得分：2)
@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);
});
答案 16 :(得分：2)
在我的情况下，我不得不在页面内打印图像。当我使用投票的解决方案时，我有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>
答案 17 :(得分：2)
桑德罗的方法效果很好。
我调整它以允许允许多个printMe链接，特别是在选项卡页面和扩展文本中使用。
function processPrint(printMe){＆lt; - 在此处调用变量
var printReadyElem = document.getElementById(printMe);＆lt; - 删除printMe周围的引号以询问变量
<a href="javascript:void(processPrint('divID'));">Print</a>＆lt; - 将要打印的div ID传递给函数，以将printMe变量转换为div ID。需要单引号
答案 18 :(得分：1)
我有多个图像，每个图像都有一个按钮，需要点击一个按钮，用图像打印每个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!" />
答案 19 :(得分：1)
在没有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();
}
答案 20 :(得分：1)
我参加这个聚会很晚，但是我想提出另一种方法。我编写了一个名为PrintElements的微型JavaScript模块，用于动态打印网页的各个部分。
它通过遍历选定的节点元素来工作，并且对于每个节点，它遍历DOM树直到BODY元素。在每个级别上，包括初始级别（这是要打印的节点级别），它都将标记类（pe-preserve-print）附加到当前节点。然后，将另一个标记类（pe-no-print）附加到当前节点的所有同级上，但前提是它们上没有pe-preserve-print类。作为第三步，它还将另一个类附加到保留的祖先元素pe-preserve-ancestor。
一个非常简单的仅打印辅助CSS会隐藏并显示各个元素。这种方法的好处是保留了所有样式，不会打开新窗口，不需要在很多DOM元素之间移动，并且通常对原始文档无害。
请参阅demo，或阅读相关文章for further details。
答案 21 :(得分：1)
适合空空高度的最佳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;
}
}
答案 22 :(得分：1)
另一个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应用于它。
答案 23 :(得分：1)
我尝试了许多提供的解决方案。他们中没有一个完美无缺。他们要么丢失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();
}
答案 24 :(得分：1)
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";
}
答案 25 :(得分：1)
使用特殊样式表进行打印
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
然后在每个标签中添加一个类，即“noprint”，这是您不想打印的内容。
在CSS中使用
.noprint {
display: none;
}
答案 26 :(得分：1)
你可以使用一个单独的CSS样式来禁用除id为“printarea”的内容之外的所有其他内容。
有关详细说明和示例，请参阅CSS Design: Going to Print。
答案 27 :(得分：1)
如果您只想打印此div，则必须使用以下说明：
@media print{
*{display:none;}
#mydiv{display:block;}
}
答案 28 :(得分：0)
我找到了解决方法。
@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;
}
}
答案 29 :(得分：0)
或使用visibility:visible和visibility:hidden css属性以及@media print{}
'display：none'将隐藏所有嵌套的'display：block'。那不是解决方案。
答案 30 :(得分：0)
基于@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>
答案 31 :(得分：0)
所有答案都有取舍，不能用于所有情况。它们分为 3 类：
使用打印样式表。这需要将整个网站构建为具有打印感知能力。
隐藏 <body> 中的所有元素，仅显示可打印元素。这对于简单的页面很有效，但对于复杂的页面就很棘手。
用可打印元素的内容打开一个新窗口或用元素的内容替换 <body> 内容。第一个会丢失所有样式，第二个是乱七八糟的，可能会破坏事件。
没有一种解决方案适用于所有情况，因此拥有所有这些选择是件好事，我正在添加另一种在某些情况下效果更好的解决方案。此解决方案是两种类别的混合：隐藏 <body> 的所有内容，然后将可打印元素的内容复制到新的 <div> 并将其附加到 <body>。打印完后，去掉新添加的<div>，将<body>的内容显示回来。这样，您就不会丢失样式或事件，也不会因为打开新窗口而陷入困境。但与所有其他解决方案一样，它不适用于所有情况。如果您的可打印元素的样式取决于其父项，您将丢失这些样式。与必须为整个网站设置样式以进行打印相比，独立于其父项设置可打印元素的样式要容易得多。
唯一的障碍是弄清楚如何选择 <body> 的所有内容。对于简单的页面，通用样式 body>* 可以解决问题。但是，复杂页面通常在 <script> 的末尾有 body' and also some 标签，用于对话框等。隐藏所有这些很好，但您不想在打印后显示它们。< /p>
就我而言，我构建的所有网站都在 <body> 中包含三个部分：<header>、<footer> 以及它们之间的 <div id="Content">。根据您的情况调整以下函数的第一行：
function PrintArea(selector) {
//First hide all content in body.
var all = $("body > header, body > #Content, body > footer")
all.hide();
//Append a div for printing.
$("body").append('<div id="PrintMe">');
//Copy content of printing area to the printing div.
var p = $("#PrintMe");
p.html($(selector).html());
//Call the print dialog.
window.print();
//Remove the printing div.
p.remove();
//Show all content in body.
all.show();
}
我使用 jQuery 是因为它更简洁、更简单，但如果您愿意，您可以轻松地将其转换为 vanilla JavaScript。当然，您可以按照对局部变量的建议将 var 更改为 let。
答案 32 :(得分：0)
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;
}