通常的web页面中,我们要求打印结果和显示结果一样,但在一些报表或业务系统中,我们可能只需要打印页面中的一部分内容,例如我只要打印数据,但按钮和背景不需要打印,这是由业务需求决定的,我们可以想象一下,如果一张打印出来的发票中出现一个按钮,你会怎么想,估计要昏过去的,呵呵~~

好了,说完需求,我来说说如何实现,一种方法是为屏幕显示和打印分别准备一个css文件,如下所示:

用于屏幕显示的css:

CSS实现不同的打印和屏幕显示结果<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

用于打印的css:

CSS实现不同的打印和屏幕显示结果<link rel="stylesheet" href="css/printstylesheet.css" media="print" /> 

注意,这两个css是放在一个web页面里面的。

还有一种是import方式:
CSS实现不同的打印和屏幕显示结果<style type="text/css">
CSS实现不同的打印和屏幕显示结果    @import url("css/printstylesheet.css") print;
CSS实现不同的打印和屏幕显示结果</style>

最后一种写法是可以直接把屏幕显示样式和打印样式写在一个css文件中:
  }

@media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。

相关文章:

  • 2021-12-23
  • 2021-12-04
  • 2021-12-31
  • 2022-12-23
  • 2022-12-23
  • 2021-10-02
  • 2021-07-07
  • 2021-12-01
猜你喜欢
  • 2021-06-16
  • 2022-12-23
  • 2021-12-19
  • 2021-05-17
  • 2022-12-23
  • 2021-08-01
相关资源
相似解决方案