打印<div id="printarea"></div>只要？

Question

如何打印指示的 div（无需手动禁用页面上的所有其他内容）？

我想避免出现新的预览对话框，因此使用此内容创建新的 window 没有用。

该页面包含几个表格，其中一个包含我要打印的 div - 该表格的样式为 web 的视觉 styles，不应在打印中显示。

Answer 1

这是一个通用的解决方案，仅使用 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移动到左上角，以便正确打印。

Answer 2

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

将您的可打印部分放在一个 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"）。

没有绒毛，重量轻，它只是工作。

Answer 3

到目前为止，所有答案都存在相当大的缺陷——它们要么涉及将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 中移动一些东西......

Answer 4

使用 jQuery 就这么简单：

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

Answer 5

您可以使用打印样式表，并使用 CSS 来安排您想要打印的内容吗？ 阅读这篇文章以获得更多指导。

Answer 6

如何打印指示的div（而无需手动禁用页面上的所有其他内容）？

我想避免使用新的预览对话框，因此使用此内容创建新窗口没有用。

该页面包含几个表，其中一个表包含我要打印的div-该表已为网络设置了视觉样式，不应以打印形式显示。

Answer 7

我真的不喜欢这些答案中的任何一个。 如果您有一个类（例如 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" />

Answer 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('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>

Answer 9

给出你想要打印 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>

Answer 10

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

Answer 11

嗯...使用样式表的类型进行打印...例如：

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

打印.css：

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

Answer 12

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

Answer 13

如果没有 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();
    }

Answer 14

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

唯一要做的另一件事是在您的加载处理中添加一行，以便最初禁用打印样式，从而允许整页打印。

<body onLoad='disableSheet(0,true)'>

然后，您可以从文档中的任何位置打印 div。 只需从按钮或其他任何地方发出 printDiv("thedivid") 。

这种方法的一大优点是它提供了从页面中打印选定内容的通用解决方案。 它还允许对打印的元素使用现有样式 - 包括包含 div。

注意：在我的实现中，这必须是第一个样式表。 如果您需要稍后在图纸序列中进行，请将图纸参考 (0) 更改为适当的图纸编号。

Answer 15

Sandro 的方法效果很好。

我对其进行了调整以允许多个 printMe 链接，特别是用于标签页和扩展文本。

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

var printReadyElem = document.getElementById(printMe); <-- 删除 printMe 周围的引号以要求变量

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

Answer 16

@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);
});

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

Answer 18

使用 CSS 3，您可以使用以下内容：

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

Answer 19

在不影响当前页面的情况下再增加一种方法，并且在打印时也会保留 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 被应用到它。

Answer 20

适合空间空高度的最佳 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;
  }
}

Answer 21

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

}

Answer 22

您可以使用单独的 CSS 样式来禁用除 ID 为“printarea”的内容之外的所有其他内容。

参见CSS Design: Going to Print以获得进一步的解释和示例。

Answer 23

我尝试了许多提供的解决方案。没有一个能完美运行。 他们要么失去 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();
    }

Answer 24

我使用 JavaScript 获取内容并创建了一个可以打印的窗口...

Answer 25

我参加这个聚会很晚了，但我想用另一种方法加入。 我编写了一个名为PrintElements的小型 JavaScript 模块，用于动态打印网页的各个部分。

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

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

请参阅演示，或阅读相关文章了解更多详细信息。

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

Answer 27

所有答案都有权衡，不能用于所有情况。 它们分为 3 类：

使用打印样式表。 这需要构建整个网站以具有打印意识。
隐藏<body>中的所有元素，只显示可打印的元素。 这适用于简单的页面，但对于复杂的页面却很棘手。
使用可打印元素的内容打开一个新窗口，或将<body>内容替换为该元素的内容。 第一个会失去所有样式，第二个是杂乱无章的，可以破坏事件。

没有一种解决方案可以适用于所有情况，因此拥有所有这些选择很好，我正在添加另一种在某些情况下效果更好的解决方案。 这个解决方案是两种类型的混合：隐藏<body>的所有内容，然后将可打印元素的内容复制到新的<div>并将其附加到<body> 。 打印完后，去掉新添加的<div> ，将<body>的内容显示回来。 这样，您就不会丢失样式或事件，也不会因为打开新窗口而搞砸。 但与所有其他解决方案一样，它不适用于所有情况。 如果您的可打印元素的样式取决于其父元素，您将丢失这些样式。 独立于其父元素来设置可打印元素的样式仍然比为打印整个网站设置样式要容易得多。

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

就我而言，我在<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 。

Answer 28

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

Answer 29

我尝试了许多提供的解决方案。没有一个能完美运行。 它们要么丢失 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();

Answer 30

你可以使用这个：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'。 那不是解决方案。

Answer 31

我有多个图像，每个图像都有一个按钮，需要单击一个按钮来打印每个带有图像的 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!" />

Answer 32

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

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

然后为每个标签添加一个类，即“noprint”，这是您不想打印的内容。

在 CSS 中使用

.noprint {
  display: none;
}

Answer 33

如果你只想打印这个 div，你必须使用指令：

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

Answer 34

我的方法 - 简单的 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;
}

它能做什么？

将.printing类添加到 body 元素。 使用 CSS，我们用visibility:hidden;
同时，我们使用.printing .printView为 CSS 做好准备，以便为打印区域提供我们想要的任何类型的视图。
触发window.print();
当用户取消/打印时，从 body 元素中删除.printing类。

例子：


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

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

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

让我知道这是否对任何人有帮助:)

Answer 35

尝试这个：

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 解决方案，在一个特定的答案中，它使所有 body 元素立即不可见。 如果需要的话，祝你打印整页好运。

而且我也更喜欢“显示：无”方法与“可见性：隐藏”方法，因此无需将可打印元素设为绝对元素并将其左上对齐。 但我想这是主观的。

最后，它确实击败了新的 window 方法。

Answer 36

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

打印<div id="printarea"></div>只要？

问题描述

35 个解决方案

解决方案1
951 已采纳 2010-04-11 22:39:26

解决方案2
283 2011-09-23 17:16:58

解决方案3
128 2009-01-22 12:28:28

解决方案4
116 2009-11-06 12:57:54

解决方案5
23 2009-01-22 12:12:20

解决方案6
22 2010-01-04 19:18:34

解决方案7
17 2013-07-23 15:02:28

解决方案8
10 2013-04-09 11:38:46

解决方案9
10

解决方案10
7 2013-10-10 09:22:35

解决方案11
6 2009-01-22 12:13:15

解决方案12
6 2020-01-09 14:45:05

解决方案13
5 2020-11-10 16:51:12

解决方案14
3 2011-01-22 21:36:50

解决方案15
2

解决方案16
2 2015-09-15 08:03:36

解决方案17
2 2016-06-17 14:18:10

解决方案18
2 2009-01-22 12:14:31

解决方案19
2 2018-02-15 05:22:13

解决方案20
2 2018-04-19 08:20:53

解决方案21
1 2014-02-27 17:47:42

解决方案22
1 2009-01-22 12:14:16

解决方案23
1 2017-11-09 15:54:29

解决方案24
1 2009-02-03 13:06:46

解决方案25
1 2019-03-10 19:07:36

解决方案26
1 2019-09-25 04:55:22

解决方案27
1 2021-06-09 17:37:16

解决方案28
1 2021-07-27 12:01:05

解决方案29
1 2022-02-15 11:05:59

解决方案30
0 2013-04-05 13:21:42

解决方案31
0 2016-10-21 14:45:43

解决方案32
0 2009-01-22 12:14:11

解决方案33
0

解决方案34
0 2022-07-07 10:25:11

解决方案35
0 2022-11-29 13:41:19

解决方案36
-1 2020-01-16 01:39:50

打印<div id="printarea"></div>只要？

问题描述

35 个解决方案

解决方案1 951 已采纳 2010-04-11 22:39:26

解决方案2 283 2011-09-23 17:16:58

解决方案3 128 2009-01-22 12:28:28

解决方案4 116 2009-11-06 12:57:54

解决方案5 23 2009-01-22 12:12:20

解决方案6 22 2010-01-04 19:18:34

解决方案7 17 2013-07-23 15:02:28

解决方案8 10 2013-04-09 11:38:46

解决方案9 10

解决方案10 7 2013-10-10 09:22:35

解决方案11 6 2009-01-22 12:13:15

解决方案12 6 2020-01-09 14:45:05

解决方案13 5 2020-11-10 16:51:12

解决方案14 3 2011-01-22 21:36:50

解决方案15 2

解决方案16 2 2015-09-15 08:03:36

解决方案17 2 2016-06-17 14:18:10

解决方案18 2 2009-01-22 12:14:31

解决方案19 2 2018-02-15 05:22:13

解决方案20 2 2018-04-19 08:20:53

解决方案21 1 2014-02-27 17:47:42

解决方案22 1 2009-01-22 12:14:16

解决方案23 1 2017-11-09 15:54:29

解决方案24 1 2009-02-03 13:06:46

解决方案25 1 2019-03-10 19:07:36

解决方案26 1 2019-09-25 04:55:22

解决方案27 1 2021-06-09 17:37:16

解决方案28 1 2021-07-27 12:01:05

解决方案29 1 2022-02-15 11:05:59

解决方案30 0 2013-04-05 13:21:42

解决方案31 0 2016-10-21 14:45:43

解决方案32 0 2009-01-22 12:14:11

解决方案33 0

解决方案34 0 2022-07-07 10:25:11

解决方案35 0 2022-11-29 13:41:19

解决方案36 -1 2020-01-16 01:39:50

解决方案1
951 已采纳 2010-04-11 22:39:26

解决方案2
283 2011-09-23 17:16:58

解决方案3
128 2009-01-22 12:28:28

解决方案4
116 2009-11-06 12:57:54

解决方案5
23 2009-01-22 12:12:20

解决方案6
22 2010-01-04 19:18:34

解决方案7
17 2013-07-23 15:02:28

解决方案8
10 2013-04-09 11:38:46

解决方案9
10

解决方案10
7 2013-10-10 09:22:35

解决方案11
6 2009-01-22 12:13:15

解决方案12
6 2020-01-09 14:45:05

解决方案13
5 2020-11-10 16:51:12

解决方案14
3 2011-01-22 21:36:50

解决方案15
2

解决方案16
2 2015-09-15 08:03:36

解决方案17
2 2016-06-17 14:18:10

解决方案18
2 2009-01-22 12:14:31

解决方案19
2 2018-02-15 05:22:13

解决方案20
2 2018-04-19 08:20:53

解决方案21
1 2014-02-27 17:47:42

解决方案22
1 2009-01-22 12:14:16

解决方案23
1 2017-11-09 15:54:29

解决方案24
1 2009-02-03 13:06:46

解决方案25
1 2019-03-10 19:07:36

解决方案26
1 2019-09-25 04:55:22

解决方案27
1 2021-06-09 17:37:16

解决方案28
1 2021-07-27 12:01:05

解决方案29
1 2022-02-15 11:05:59

解决方案30
0 2013-04-05 13:21:42

解决方案31
0 2016-10-21 14:45:43

解决方案32
0 2009-01-22 12:14:11

解决方案33
0

解决方案34
0 2022-07-07 10:25:11

解决方案35
0 2022-11-29 13:41:19

解决方案36
-1 2020-01-16 01:39:50