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

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

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

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

当前回答

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

It works by iterating through selected node elements, and for each node, it traverses up the DOM tree until the BODY element. At each level, including the initial one (which is the to-be-printed node’s level), it attaches a marker class (pe-preserve-print) to the current node. Then attaches another marker class (pe-no-print) to all siblings of the current node, but only if there is no pe-preserve-print class on them. As a third act, it also attaches another class to preserved ancestor elements pe-preserve-ancestor.

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

请参阅演示，或阅读相关文章以获得更多详细信息。

2019-03-10 19:07:36

其他回答

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

2017-11-09 15:54:29

我的方法-简单的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中，我们用可见性隐藏所有正文内容:hidden; 与此同时，我们用.printing . printview保持CSS的就绪状态，以便为打印区域提供我们想要的任何类型的视图。触发window.print (); 当用户取消/ prints时，从body元素中删除.printing类。

例子:


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

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

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

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

2022-07-07 10:25:11

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

2013-04-09 11:38:46

您是否可以使用打印样式表，并使用CSS来排列想要打印的内容?阅读这篇文章获取更多的建议。

2009-01-22 12:12:20

试试这个:

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

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

推荐文章

最新文章

标签