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

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

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


当前回答

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

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

其他回答

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

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

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

@Kevin佛罗里达 如果你有同一个类的多个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);
});

你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。

参见CSS设计:准备打印以获得更多的解释和示例。

Give whatever element you want to print the id printMe. Include this script in your head tag: <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> Call the function <a href="javascript:void(processPrint());">Print</a>