如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
在我的例子中，我必须在页面中打印图像。当我使用投票的解决方案时，我有一个空白页面，另一个显示图像。希望它能帮助到一些人。
下面是我使用的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(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中元素的打印—内容被抑制，但分配的区域为空。 打印让你有项目显示在打印版本，但 不在屏幕上。它们通常会有“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)更改为适当的表号，如果需要将其置于表序列的后面。
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;
}
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。这里的选择器必须是特定的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，要么不能在所有浏览器中工作。我找到了一个完美而简单的解决方案，既不丢失CSS，也适用于所有浏览器。
Html
<div class="row" id="print-div">
Your html
</div>
打印稿
let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
.write(`<html>
${printHead}
<body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();
