打印<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

其他回答

到目前为止，所有的答案都是有缺陷的——它们要么涉及在所有内容中添加class="noprint"，要么会在#printable中混乱显示。

我认为最好的解决方案是在不可打印的东西周围创建一个包装器:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

当然，这并不是完美的，因为它涉及到在HTML中移动一些东西……

2009-01-22 12:28:28

<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

2013-10-10 09:22:35

我找到了解决办法。

@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

我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS，要么不能在所有浏览器中工作。我找到了一个完美而简单的解决方案，既不丢失CSS，也适用于所有浏览器。

Html

<div class="row" id="print-div">
      Your html 
    </div>

打印稿

let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
    .write(`<html>
     ${printHead}
    <body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();

2022-02-15 11:05:59

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

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

2009-01-22 12:14:16

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

推荐文章

最新文章

标签