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

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

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

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

当前回答

你可以用这个: 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'。这不是解。

2013-04-05 13:21:42

其他回答

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

2009-02-03 13:06:46

另一种不影响当前页面的方法，它还在打印时持久化css。这里的选择器必须是特定的div选择器，我们需要打印的内容。

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

这里提供了一些时间显示外部css被应用到它。

2018-02-15 05:22:13

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

2013-07-23 15:02:28

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

我找到了解决办法。

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

2019-09-25 04:55:22

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

推荐文章

最新文章

标签