打印内容

在我的网页我有一个屏幕，另一个隐藏上显示的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

回答

相关问题