CSS实现不同的打印和屏幕显示结果
通常的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/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
@media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。
版权声明:本文由作者Tony Qu原创, 未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步