如何僅在打印文件中顯示 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" />