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

试试这个:

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

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

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

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

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

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

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