通常的web页面中,我们要求打印结果和显示结果一样,但在一些报表或业务系统中,我们可能只需要打印页面中的一部分内容,例如我只要打印数据,但按钮和背景不需要打印,这是由业务需求决定的,我们可以想象一下,如果一张打印出来的发票中出现一个按钮,你会怎么想,估计要昏过去的,呵呵~~
好了,说完需求,我来说说如何实现,一种方法是为屏幕显示和打印分别准备一个css文件,如下所示:
用于屏幕显示的css:
![](/Images/OutliningIndicators/None.gif)
用于打印的css:
![](/Images/OutliningIndicators/None.gif)
注意,这两个css是放在一个web页面里面的。
还有一种是import方式:
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
最后一种写法是可以直接把屏幕显示样式和打印样式写在一个css文件中:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
@media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。