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

html-css022

怎样使用 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)//打印预览

media 属性用于为不同的媒介类型规定不同的样式

media=print 也就是针对打印, 不谢media就是针对频幕, 也就是说, 不谢media的时候, 在网页能看到效果,media=print这个在打印或者打印预览的时候, 就可以看到, 可以用chrome看一下效果, ctrl+p, 就能看预览了,type="text/css" 就是说, 值 "text/css" 指示内容是标准的 CSS。

下面最后一行, 其实没什么好解释的了, 就是一个样式, 总体下来, 应该是, 在打印的时候, 把带有.noprint的内容隐藏掉, 这些东西建议去w3cschool查一下, 因为解释的比我要清楚很多

查不到@page的用途,建议你看看以下内容:

使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。 详细如下: <style media=print type="text/css"> .noprint{visibility:hidden}</style> 要打印的内容。哈哈! <p class="noprint">将不打印的代码放在这里。</p><a href="javascrīpt:window.print()" target="_self">打印</a>

第二种方法:指定打印区域 把要打印的内容放入一个 span或div,然后通过一个函数打印。 <span id='div1'>把要打印的内容放这里</span><p>所有内容</p><div id="div2">div2的内容</div><a href="javascrīpt:printme()" target="_self">打印</a><scrīpt language="javascrīpt">function printme() { document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML window.print()} </scrīpt>如果要打印的只是整个页面中的一小部分,就最好采用第二种方法。

第三种方法:如果要打印的页面排版和原web页面相差很大,采用此种方法。 点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。