使用CSS打印 doument

分享于 

3分钟阅读

Web开发

  繁體 雙語

介绍

当需要打印便笺时我们该做什么? 也许你打开了一个与当前文档相同的弹出模板,但弹出的文档没有按钮。图片。条目等等。 打开新窗口时,再次点击数据库( 如果你有),这意味着需要执行更多步骤。 我们将看到如何避免这种情况。

假设我们有以下 table:


<table>


 <tr>


 <td>Navigate</td>


 <td>Content</td>


 <td><input type="button" value="ok"></td>


 </tr>


</table>



现在我们只想打印内容单元格并隐藏其他内容。 我将为此任务创建一个新样式 CSS:


<style media="screen">


. noPrint{ display: block; }


. yesPrint{ display: block !important; }


</style> 


<style media="print">


. noPrint{ display: none; }


. yesPrint{ display: block !important; }


</style>



现在我只需要将这个类添加到我的控件或者 table 单元格( 也行):


<table>


 <tr>


 <td class="noPrint">Navigate</td>


 <td class="yesPrint">Content</td>


 <td>My button is hidden <input type="button" value="ok" class="noPrint"></td>


 </tr>


</table>



可以看到,你还可以将CSS类添加到按钮中。 在浏览器中打开这里文件。 我们会看到导航内容和按钮。 现在去浏览浏览器中的图片,看看会发生什么。 内容和按钮已经消失了,我们可以设置按钮来打印。


<table>


 <tr>


 <td class="noPrint">Navigate</td>


 <td class="yesPrint">Content</td>


 <td>My button is hidden <input type="button" 



          value="Print" class="noPrint" onclick="window.print();"></td>


 </tr>


</table>



运行页面并单击打印。 就是这样。


print  
相关文章