打印<div id="printarea"></div> only?

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

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

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

当前回答

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

使用打印样式表。这就要求整个网站都能识别打印。隐藏<body>中的所有元素，只显示可打印的元素。这对于简单的页面很有效，但是对于复杂的页面就有些棘手了。打开一个包含可打印元素内容的新窗口，或者将<body>内容替换为元素内容。第一种会丢失所有的风格，第二种是混乱的，可能会破坏事件。

There is no one solution that will work well for all cases, so it is good to have all those choices and I'm adding another solution that works much better in some cases. This solution is a hybrid of two categories: hide all content of <body>, then copy the content of the printable element to a new <div> and append it to <body>. After printing, remove the newly added <div> and show the content of <body> back. This way, you won't lose the styles or events, and you don't mess up with opening a new window. But like all other solutions, it won't work well for all cases. If your printable element's styles depends on its parents, you'll lose those styles. It is still much easier to style your printable elements independently from its parents than having to style the entire website for printing.

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

在我的情况下，我建立所有的网站与三个部分内<体>:<头>，<脚>，和他们之间<div id="内容">。根据您的情况调整下面函数的第一行:

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。

2021-06-09 17:37:16

其他回答

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

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

2009-01-22 17:21:44

到目前为止，所有的答案都是有缺陷的——它们要么涉及在所有内容中添加class="noprint"，要么会在#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中移动一些东西……

2009-01-22 12:28:28

试试这个:

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”方法而不是“visibility: hidden”方法，所以没有必要将可打印元素设置为绝对元素并将其对齐到左上角。但我想这是主观的。

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

2022-11-29 13:41:19

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

2020-11-10 16:51: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中元素的打印—内容被抑制，但分配的区域为空。打印让你有项目显示在打印版本，但不在屏幕上。它们通常会有“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)更改为适当的表号，如果需要将其置于表序列的后面。

2011-01-22 21:36:50

打印<div id="printarea"></div> only?

推荐文章

最新文章

标签