Question

观看下面的代码。我在DIV中有一个内容，可以在＆＃34; PRINT＆＃34;单击按钮。它工作正常，但是我需要从网站页面隐藏这个div（及其内容），并且只显示在打印文件中。你有什么建议吗？

＆＃13;

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

＆＃13;

bootstrap-4.X.X.zip

＆＃13;

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

如果您使用的是bootstrap，您只需使用一个简单的引导类来隐藏或显示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" />

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

3 个答案: