怎样使用 css 的@media print控制打印

html-css014

怎样使用 css 的@media print控制打印,第1张

IE打印设置中默认的页眉和页脚的含义，而且可以对上述代码进行组合使用来设置自己喜欢的打印设置。这里我们所要说的并不单单是这些，大家设想一下我们开发了一个基于B/S结构的系统，其中有报表的部分，我们不能让每个客户端都自己去设置IE的打印设置，因此我们需要在程序中控制这些设置。下面我们用VBScript脚本写一个函数通过修改注册表键值来达到控制页面设置的目的，代码如下：

script language="VBScript">

dim path, reg

'path存放IE打印设置的注册表地址, reg存放WScript.Shell组件的对象

path = "HKEY_CURRENT_USER\Software\Micro-soft\Internet Explorer\PageSetup"

'通过注册表修改打印设置，只修改页眉、页脚和各边界的值

'参数说明：header--页眉，footer--页脚，margin_left--左边界

'margin_top--上边界，margin_right--右边界，margin_bottom--下边界

'页边距的设置中 1对应25.4mm，即margin_left=1表示实际值的25.4mm

function pagesetup(header, footer, margin_left, margin_top, margin_right, margin_bottom)

On Error Resume Next

Set reg = CreateObject("WScript.Shell")

if err.Number>0 then

MsgBox "不能创建WScript.Shell对象！"

exit function

end if

reg.RegWrite path+"\header", header'设置页眉

reg.RegWrite path+"\footer", footer '设置页脚

reg.RegWrite path+"\margin_left", margin_left'设置左边界

reg.RegWrite path+"\margin_top", margin_top'设置上边界

reg.RegWrite path+"\margin_right", margin_right'设置右边界

reg.RegWrite path+"\margin_bottom", margin_bottom'设置下边界

end function

/script>

程序中可以再写一个函数（可用VBscript或javascript脚本写）先调用该函数，然后再调用window.print()实现打印，这里就不给出代码了。细心的读者一定发现了这样打印出来的页面会有打印按钮在上面，而且分页是IE打印控件根据纸张大小分出来的，下面我们介绍一种方法来控制分页和打印按钮的显示。该方法是利用CSS样式表来控制这些设置，因为在样式表中有一个“media=print”属性，该属性只有在打印的时候才会起作用，因此可以实现对打印按钮和分页的控制，具体做法如下：

style media=print>

.noprint{display:none}

.pagenext{page-break-after: always}

/style>

只要在打印按钮中加入代码class="noprint"，而在需要分页的地方加入代码 div class="pagenext">/div>就可以了。到目前为止我们的打印功能已经比较完善了，但是还没有打印预览和直接打印的功能，一般用户在打印之前都会预览一下，如果没有问题就直接打印了。下面我们通过IEWebBrowser组件来实现这两个功能。

首先创建IEWebBrowser对象：

object id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 width=0 height=0>/object >

然后通过不同参数调用ExecWB方法实现打印预览和直接打印功能：

WebBrowser.ExecWB(6,1)//打印

WebBrowser.ExecWB(6,6)//直接打印

WebBrowser.ExecWB(7,1)//打印预览

可能是不同IE默认值不一样把；可以详细设置：

// 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt} }

// 设置打印机用字体尺寸 @media print { @import "print.css" BODY {font-size:8pt} }

或者<style media="print">body{font-size:12px}</style>

显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用print

css。

引入print css

使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:

<link rel="stylesheet" href="print.css" media="print" />

表明print.css样式表是用于打印的

使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:

@media print selector {

...

}

或者

@media print {

  selector{

  ...

  }

}