打印<div id="printarea;></div>只有吗?

如何打印指定的div(无需手动禁用页面上的所有其他内容)?

我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。

该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。

899739 次浏览
小开

您可以使用打印样式表，并使用CSS来安排您想要打印的内容吗?阅读本文获取更多指针。

小开

嗯……使用样式表的类型进行打印…例如:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css:

div { display: none; }
#yourdiv { display: block; }
小开

使用特殊的样式表进行打印

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

然后添加一个类，即。"noprint"到每个你不想打印的内容的标签。

在CSS中使用

.noprint {
display: none;
}
小开

你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。

请参阅CSS设计:即将打印以获得进一步的解释和示例。

小开

在css3中，你可以使用以下功能:

body *:not(#printarea) {
display: none;
}
小开

到目前为止，所有的答案都是有缺陷的——它们要么涉及到将class="noprint"添加到所有内容中，要么会在#printable中混乱display。

我认为最好的解决方案是在不可打印的东西周围创建一个包装器:

<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，你必须使用指令:

@media print{
*{display:none;}
#mydiv{display:block;}
}
小开

我拿起使用JavaScript的内容，并创建了一个窗口，我可以打印代替…

小开

  1. 给任何你想要打印id printMe的元素。

  2. 在你的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>

  3. Call the function

    <a href="javascript:void(processPrint());">Print</a>
小开

桑德罗的方法很有效。

我对它进行了调整，以允许多个printMe链接，特别是在选项卡页面和扩展文本中使用。

function processPrint(printMe){ <——这里调用一个变量

var printReadyElem = document.getElementById(printMe); <——删除printMe周围的引号，以请求一个变量

<a href="javascript:void(processPrint('divID'));">Print</a> <——将要打印的div ID传递给函数，将printMe变量转换为div ID。需要单引号

小开

使用jQuery，它就像这样简单:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
小开
最佳答案

这里是一个通用的解决方案，使用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移到左上角，这样它就能正确打印。

小开

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)更改为适当的表号，如果需要将其置于表序列的后面。

小开

我有一个用最少代码更好的解决方案。

把你的可打印部分放在一个div中，像这样的id:

<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")。

没有绒毛，重量很轻，很好用。

小开

你可以使用这个: # EYZ0 < / p >

或者使用visibility:visible和visibility:hidden css属性和@media print{}

'display:none'将隐藏所有嵌套的'display:block'。这不是解。

小开

步骤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>
小开

总的来说，这些答案我都不太喜欢。如果你有一个类(比如printableArea)，并把它作为body的直接子类，那么你可以在你的print 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的直接子元素隐藏起来。下面的其他解决方案使用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" />
小开 
<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>

小开

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";


}
小开
< p > @Kevin佛罗里达 如果你有多个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);
});
小开

在我的例子中，我必须在页面中打印图像。当我使用投票的解决方案时，我有一个空白页面，另一个显示图像。希望它能帮助到一些人。

下面是我使用的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>
小开

我有多个图像，每个图像都有一个按钮，需要单击一个按钮来打印每个带有图像的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绑定，要么丢失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();
}
小开

另一种不影响当前页面的方法，它还在打印时持久化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:

@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;
}
}
小开

我来这个派对已经很晚了，但我想提出另一种方法。我编写了一个名为PrintElements的JavaScript模块，用于动态打印网页的部分内容。

它通过迭代选定的节点元素来工作，对于每个节点，它向上遍历DOM树，直到BODY元素。在每个级别上，包括初始级别(这是要打印的节点级别)，它将一个标记类(pe-preserve-print)附加到当前节点。然后将另一个标记类(pe-no-print)附加到当前节点的所有兄弟类，但前提是它们上没有pe-preserve-print类。作为第三个动作，它还将另一个类附加到保留的祖先元素pe-preserve-ancestor。

一个非常简单的补充只打印的css将隐藏和显示各自的元素。这种方法的一些好处是保留了所有的样式，它不需要打开一个新窗口，不需要移动大量的DOM元素，而且通常它对原始文档是非侵入性的。

参见演示，或阅读相关文章欲知详情。

小开

我找到了解决办法。

@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;
}
}
小开

打印特定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;
}
小开

基于@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>
小开

没有CSS小丑，html和纯javascript与iframe工作最好。然后只需点击文本，你想打印。带有文本内容的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();
}
小开

所有答案都有利弊，不能用于所有情况。它们分为三类:

  1. 使用打印样式表这就要求整个网站都能识别打印。

  2. 隐藏<body>中的所有元素，只显示可打印的元素。这对于简单的页面很有效，但是对于复杂的页面就有些棘手了。

  3. 打开一个带有可打印元素内容的新窗口，或将<body>内容替换为元素内容。第一种会丢失所有的风格，第二种是混乱的，可能会破坏事件。

没有一种解决方案对所有情况都适用，所以有所有这些选择是很好的，我添加了另一种解决方案，在一些情况下工作得更好。这个解决方案是两个类别的混合:隐藏<body>的所有内容，然后将可打印元素的内容复制到新的<div>，并将其附加到<body>。打印完成后，删除新添加的<div>并显示回<body>的内容。这样，您就不会丢失样式或事件，也不会在打开新窗口时出错。但像所有其他解一样，它并不适用于所有情况。如果你的printable元素的样式依赖于它的父元素，你就会失去这些样式。将可打印元素的样式独立于其父元素，要比为打印而设计整个网站的样式容易得多。

唯一的障碍是弄清楚如何选择<body>的所有内容。对于简单的页面，通用样式body>*就可以了。然而，复杂的页面通常在body' and also some 的末尾有<script>标记，用于对话框等。隐藏所有这些都是可以的，但是在打印后不希望显示它们。

在我的情况下，我建立所有的网站与三个部分在<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是因为它更干净、更简单，但如果您愿意，也可以轻松地将其转换为普通的JavaScript。当然，对于局部变量，您可以将var更改为let。

小开 
It's better solution. You can use it Angualr/React

超文本标记语言

 <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;
    

}
小开

我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS，要么不能在所有浏览器中工作。我找到了一个完美而简单的解决方案，既不丢失CSS，也适用于所有浏览器。

超文本标记语言

<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();
小开

我的方法-简单的CSS和JS。也适用于React/NextJS。

  const handlePrint = e => {
e.preventDefault();
const bodyElement = document.getElementsByTagName('body')[0];


bodyElement.classList.add('printing');
window.print();
bodyElement.classList.remove('printing');
};


.printing {
visibility:hidden;
}


.printView {
visibility:visible;
}


.printing .printView {
/* You can have any CSS here to make the view better on print */
position:absolute;
top:0;
}

它能做什么?

  1. 添加.printing类到body元素。在CSS中，我们用visibility:hidden;隐藏所有正文内容
  2. 与此同时，我们使用.printing .printView保持CSS为打印区域提供任何类型的视图。
  3. 触发# EYZ0
  4. 当用户取消/打印时，从body元素中删除.printing类。

例子:


<button onclick="handlePrint">
Download PDF
</button>


<div>
<h1>Don't print this</h1>


<div class="printView">Print this</div>
</div>

如果这对任何人有帮助，请告诉我:)

小开

试试这个:

function printElement($elem){
var $customPrintSection = document.getElementById('customPrintSection'),
$customPrintSectionCss = document.getElementById('customPrintSectionCss');


if ($customPrintSection){
$customPrintSection.remove();
}


if ($customPrintSectionCss){
$customPrintSectionCss.remove();
}


$customPrintSection = document.createElement('div');
$customPrintSection.id = 'customPrintSection';


$customPrintSectionCss = document.createElement('style');
$customPrintSectionCss.id = 'customPrintSectionCss';


document.body.appendChild($customPrintSection);
document.body.appendChild($customPrintSectionCss);


$customPrintSection.innerHTML = $elem.innerHTML;
$customPrintSectionCss.innerHTML = '@media screen { div#customPrintSection { display: none; } } @media print { body *:not(div#customPrintSection):not(div#customPrintSection *) { display: none; } div#customPrintSection a[href]:after { content: none !important; } }';


window.print();


$customPrintSection.remove();
$customPrintSectionCss.remove();
}

我喜欢这个解决方案，因为它不像css解决方案那样影响整个页面，它在一个特定的答案中使所有主体元素立即不可见。所以如果需要的话，祝你能打印整页。

我也喜欢“display: none”;接近vs.“能见度:隐藏”一，所以不需要将可打印元素设置为绝对值，并将其对齐到左上角。但我想这是主观的。

最后，它真的打败了新的窗口方法。


提交答案