打印內容

在我的網頁我有一個屏幕，另一個隱藏上顯示的HTML DIV。我攜帶這個隱藏的DIV內容，需要打印的報告，我需要點擊它，以便用戶不能看到它，只能打印。此外，屏幕上顯示的DIV的內容，我不想印出來。 ;）打印內容

「已經足夠研究之在這裏計算器一些話題談論它，但它講的是相反的，即不能打印隱藏的DIV的內容。

2014-09-06 Carlos Andrade

發送打印時，您可以簡單地切換可見。

Example HTML: 

<div id="printdiv"> 
    <div id="hidden_div"> 
     MORE HTML 
    </div> 
</div>

CSS

#hidden_div{display: none;}

JQuery的

function myPrint() { 
     var myPrintContent = document.getElementById('printdiv'); 
     var myPrintWindow = window.open(windowUrl, windowName, 'left=300,top=100,width=400,height=400'); 
     myPrintWindow.document.write(myPrintContent.innerHTML); 
     myPrintWindow.document.getElementById('hidden_div').style.display='block' 
     myPrintWindow.document.close(); 
     myPrintWindow.focus(); 
     myPrintWindow.print(); 
     myPrintWindow.close();  
     return false; 
    }

現在使用一個按鈕或鏈接火myPrint()，你可以打印單獨隱藏的股利和你的其他分區韓元」噸打印

來源

2014-09-06 19:52:53 Devin

在這種情況下，CSS將如何？ – 2014-09-06 20:10:23

它在那裏：你有一個#hidden_div：display：none「在打印時改變爲block – Devin 2014-09-06 20:12:11

現在完美了！謝謝 – 2014-09-06 20:23:06

您可以使用CSS media query要做到這一點，而不需要使用Javascript：

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .a {color: green;} 
      .b {color: blue;} 
      .printMe {display: none;} 
      @media print { 
       div {display: none;} 
       .printMe {display: block;} 
      } 
     </style> 
    </head> 
    <body> 
     <div class="a">Some text.</div> 
     <div class="printMe">Only to be shown in print.</div> 
     <div class="b">More characters.</div> 
    </body> 
</html>

（我已經格式化一樣，只是爲了簡潔的CSS）。

如果加載到瀏覽器中，你應該只看到彩色的文字。如果您進行打印預覽，則只能看到黑色文本。

編輯：您仍然可以使用任何其他您希望打印的方法，通過簡單的Javascript或用戶使用瀏覽器的打印方法。

來源

2014-09-06 20:09:03

很好很簡單的這種方式，更好的是你不需要使用JS。謝謝！ – 2014-09-06 20:26:44

我建議你在看向@print樣式選項。

See this article here too:

來源

2014-09-06 20:10:24

我認爲你的意思是'@media print'，而鏈接到的更好的文章應該是你鏈接到的文章中包含的文章：[打印樣式表 - 權威指南]（http://www.webcredible.co.uk /user-friendly-resources/css/print-stylesheet.shtml）。正因爲如此，您需要提供一個答案是完全夠站在自己的（儘可能），而不涉及其可能會消失在外部資源未來。 – 2014-09-06 20:17:45

回答

相關問題