如何仅在打印文件中显示 div 的内容？

Question

在下面看我的代码。 我在 DIV 中有一个内容，可以在单击“打印”按钮时打印。 它工作正常，但是我需要将此 div（及其内容）从站点页面中隐藏并仅显示在打印文件中。 你有什么建议给我吗？

 function printDiv(printThis) { var printContents = document.getElementById(printThis).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; }

 <div id="printThis"> content </div> <input type="button" onclick="printDiv('printThis')" value="PRINT" />

Answer 1

您可以使用 css @media print

这将隐藏所有正文元素并仅显示 div #printThis及其所有子元素。

@media print {
    body * {
        visibility: hidden;
    }

    #printThis,  #printThis * {
        visibility: visible;
    }

    #printThis {
        width : 100%;
        height : auto;
        position: absolute;
        left: 0;
        top: 0;
    }
}

js（无需修改/隐藏元素。CSS 会处理它）

function printDiv( printThis ) {
    window.print();
}

HTML：

<div id="printThis">
    content
</div>
<input type="button" onclick="printDiv('printThis')" value="PRINT" />

Answer 2

如果您使用的是引导程序，则可以使用简单的引导程序类来隐藏或显示 Print 中的内容

<div class="hidden-print">content for non print</div>

<div class="visible-print">content for print only</div>

Answer 3

使用引导程序很容易。 首先使用 bootstrap 类hidden-md hidden-sm hidden-lg hidden-xs隐藏 div 他们使用`visible-print 类使其可见，将您的 html 编辑为

<div id="printThis" class="visible-print"> content </div> <input type="button" onclick="printDiv('printThis')" value="PRINT" />