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

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

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


当前回答

我有多个图像,每个图像都有一个按钮,需要单击一个按钮来打印每个带有图像的div。如果我在浏览器中禁用了缓存,并且图像大小在Chrome中没有改变,这个解决方案就可以工作:

        function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

其他回答

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

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

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

桑德罗的方法很有效。

我对它进行了调整,以允许多个printMe链接,特别是在选项卡页面和扩展文本中使用。

function processPrint(printMe){<——在这里调用一个变量

var printReadyElem = document.getElementById(printMe);<——删除了printMe周围的引号以请求一个变量

< a href = " javascript:无效(processPrint (' divID '));>Print</a> <——将要打印的div ID传递到函数上,将printMe变量转换为div ID。需要单引号

你可以用这个: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

或者使用visibility:visible和visibility:hidden css属性和@media print{}

'display:none'将隐藏所有嵌套的'display:block'。这不是解。

嗯……使用样式表的类型进行打印…例如:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css:

div { display: none; }
#yourdiv { display: block; }