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

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

成都创新互联公司是一家专业提供石首企业网站建设,专注与成都做网站、成都网站设计、HTML5、小程序制作等业务。10年已为石首众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

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.Number0 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); //打印预览

网页打印样式CSS该如何操作

套正常的css网页展示的样式，另一套专门给打印的时候用的CSS样式，只要用户打印，就会通过媒体查询自动用打印的专门样式。这样，既可以在浏览器很好展示效果，也不影响具体打印出来的效果。

正常浏览器用的样式

link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" /专门打印用的样式link rel="stylesheet" type="text/css" media="print" href="/css/print.css" /

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

CSS 打印

2017-01-31

本文主要讲解如何使用 CSS 控制打印样式。

使用 CSS 可以控制文档如何正确的显示在不同的媒介 (Media) 上。其中分页媒介 (Paged Media) ，不同于连续媒介 (Continuous Media)，它可以控制文档内容，将其分隔至一个或多个不相关联的页面 (如：书、幻灯片)。

页面 (Page Sheet) 是物理介质 (如：纸张) 的表面，它包含可打印区域 (Printable Areas) 和不可打印区域 (Non-printable Areas)。用户代理可以调整文档内容的格式，使其显示在可打印区域。

页面盒子 (Page Box) 是一个由长边 (Long Edge) 和短边 (Short Edge) 组成的矩形。长边的方向决定了页面朝向 (Page Orientation)，长边是垂直方向，则页面朝向为纵向 (Portrait Orientation)，反之为横向 (Landscape Orientation)。

CSS 打印无法指定文档是否为双面打印 (Duplex Printing)，是否双面打印应该通过用户代理指定。不管是否双面打印，CSS 打印总是包含左页和右页 (分别通过 :left , :right 指定) 。（或者说 CSS 打印假定所有文档是双面打印）

和 CSS 盒子模型一样，页面盒子模型由外边距 (margin)、边框 (border)、内边距 (padding) 和 内容区域 (content area) 构成。

其中内容区域和外边距有着特殊的功能：

页面进度 (Page Progression)方向 是文档被分隔后的页面的排列方向。比如：现代中文页面进度多是从左至右；而古代中文的页面进度则相反。可以通过设置根元素 (root element) 的 direction 和 writing-mode 属性来改变页面进度。

页面的“第一页”是左页还是右页，可以由页面进度的方向决定，当页面进度方向为从左至右时，第一页是右页；反之为左页。（事实上也可以通过设置根元素的 break-before 属性来强制改变第一页是左页还是右页）

在 CSS 中使用 @media print

在 CSS 中使用 @import

在 HTML 中使用 link 标签

在 @media print 或 my-print-style.css 中，可以自由的修改大部分样式。

使用打印媒介查询可以自定义很多样式，当希望改变页面大小、边距等，就需要用到 @page 了。页面上下文 (Page Context) 中仅支持部分 CSS 属性，支持的属性有： margin 、 size 、 marks 、 bleed 以及页面外边距盒子等，不支持的属性将会被忽略。

注：常见浏览器都不支持该属性，推荐使用 Prince

页面的外边距被分成了 16 个页面外边距盒子。每个外边距盒子都有自己的外边距、边框、内边距和内容区域。页面外边距盒子用于创建页眉和页脚，页眉和页脚是页面的一部分，用于补充信息，如页码或标题。

页面外边距盒子需要在 @page 下使用，使用起来和伪类类似，也包含 content 属性。

margin 系列属性（ margin-top 、 margin-right 、 margin-bottom 、 margin-left 和 margin ）用于指定页面外边距大小。

在 CSS2.1 中，页面上下文中只支持 margin 系列属性。而且因为 CSS2.1 的页面上下文中没有字体的概念， margin 系列属性的值的单位不支持 em 和 ex 。

size 属性支持 auto 、 landscape 、 portrait 、 length{1,2} 和 page-size 。

页面上下文也支持使用伪类，其中支持的伪类有： :left 、 :right 、 :first 和 :blank 。

需要双面打印时，通常需要将左页和右页设置不同的样式（如页边距、页码位置）。这时左页和右页可以分别用 :left 和 :right 表示。再次强调， 通过 :left 和 :right 设置左右页面不同样式，并不代表用户代理会将页面双面打印

伪类 :first 用于匹配到文档的第一页。

伪类 :blank 用于匹配文档的空白页。

注意，空白页既可能是左页，又可能是右页，设置左页或右页的样式也会显示在空白页上，如果不希望显示在空白页上，可以清除这些样式。

用于控制元素之前、之后或之中是否分页， 没有生成盒子的块元素不会生效 。

page-break-before 、 page-break-after 属性支持 auto 、 always 、 avoid 、 left 、 right 、 recto 和 verso 。

page-break-inside 属性仅支持 auto 和 avoid ，表示在元素内允许或禁止分页。

orphans 和 windows 用于指定在页面的底部或顶部，元素中允许剩余的最少行数，默认为 2 行。

示例：

参考链接：

css打印样式表 第二页顶间距padding-top怎么设置？

首先，你需要确定使用下面的 link 链接到一个专门的打印样式表

link rel=”stylesheet” href=”print.css” media=”print” /

其次，放弃使用 padding-top 来控制每个打印页的头部样式，而是使用下面的语句来控制每页的上边距

@page:first {margin-top:30px}

其中 30 为你要设置的上边距

如何使用CSS控制网页打印页面格式?

由于客户要求，打印时需把打印的按钮去掉。这个时候就用到了控制打印的样式表了。 link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” / 正因为xhtml和css是分离的，所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更 多考虑到打印显示效果的需求，良好的扩展标记和结构嵌套，使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了，你象设置word一样去写你想打印的页面吧。 后来想了想，其实单独写一个css增加了请求次数，就想到了@media print{}的作用，代码如下 @media print{ .printdesc { right: 0; width: 685px; height: 69px; background-color: #FFFFFF; float:left; overflow:auto; border:0px; } .text{ float:right; width: 688px; margin-top:20px; } .printlink{ height:0px; display:none; width:0px; z-index:-10; } .printlink a{ display:none; } } 后来想到如果打印页面的某一部分，可以使用iframe来进行操作，现在的打印页面的局部内容基本上就是使用iframe进行处理。

css打印样式表 第二页顶间距出现问题

把上边元素设置height就会自动出现padding了. 现在是都以body-top为边距,所以有的元素会找不到padding的基线.

网页标题：css打印样式设置,打印机怎么设置打印样式
网页网址：http://kswjz.com/article/dsgegpo.html