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

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

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


当前回答

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

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

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

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

总的来说,这些答案我都不太喜欢。如果你有一个类(比如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" />

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