anytao.net | 《你必须知道的.NET》网站 | Anytao技术博客
发布日期：2009.12.29 作者：Anytao
© 2009 Anytao.com ，Anytao原创作品，转贴请注明作者和出处。
引言
很多时候，提供对于html的直接打印，是业务实现的某个需求，这基本是对于浏览器的打印功能的js调用，常用的方法是：
javascript:window.print();
那么，在这种情况下，对于输出Printer的页面，在大小、风格的控制上，我们就可以通过Html的方式达到目标，这就是Css。
实现
例如，我们有以下的简单page:
<div>
<div id="print">
<asp:Button ID="btnPrint" runat="server" OnClientClick="javascript:window.print();" Text="Print" />
</div>
<span class="dfDate"><%= DateTime.Now.ToString() %></span>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<span style="color: red;">2009, Anytao.com</span>
</div>
按钮Print，用于执行打印逻辑，就是一个简单的window.print调用。
应用Css控制输出效果，就是我们想要做到的事，对于打印而言，用户需要的可能是定制好的Html页面，但是这个Print按钮，可能并非用户想要在纸质报表上看到的东西，所以我们就可以应该css的media来完成这件事。
在header标签中添加：
<style type="text/css" media="print">
body {background:none}
div#print, .dfDate { display:none }
</style>
然后F5，我们将看到如下的UI显示：
![o_anytao-devstory-13-01[1]](http://www.cnblogs.com/images/cnblogs_com/anytao/162192/o_anytao-devstory-13-01.png "o_anytao-devstory-13-01[1]")
通过浏览器预览，我们看到的效果如下：
![o_anytao-devstory-13-02[1]](http://www.cnblogs.com/images/cnblogs_com/anytao/162192/o_anytao-devstory-13-02.png "o_anytao-devstory-13-02[1]")
预料之中，Print按钮和日期显示，通过
div#print, .dfDate { display:none }
定义在Print时被“去掉”了，而我们正常的页面显示中，仍然可以保持较好的UI体验。同样的道理，如果输出的报表中，对于MasterPage的某些内容心存芥蒂，就直接应该Css武器吧。但是别忘了：
<style type="text/css" media="print">
</style>
关于media
在W3C的官方文档中，对于media是这样一个理解：style sheets的一个重要的特性就是在不同的媒介上对于document的不同展现，这主要包括：screen, paper, speech syntheirzer, a brialle device。
显然meida=”print”就是对于打印机设备而言，document的展现方式了。详细的内容可见：Media types
参考文献：