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 行。
示例：
https://lon.im/post/css-print.html
参考链接：
基于web的套打，难度在于要将浏览器中呈现的html，精确地打印到票据中，而且能够实现对分页位置的控制。下面就ie浏览器所能采用的套打解决方案，来个汇总分析，希望对大家有所帮助。一、浏览器的打印功能菜单
这种方案的优势是不需要对浏览器作任何扩充，是最简单的办法，但问题也最多，如：
不能精确分页。浏览器一般是根据用户设置的页面大小，web页面的内容多少，来自行决定分页位置，程序员很难控制。会有页脚页眉干扰。
不能准确对齐边边距及打印文字。
不能解决连续打印。比如，不是仅打印一张票据，而是连续一次打印若干个票据。
二、使用webbrowser控件+ javascript
这实际上，是浏览器打印功能菜单的一种程序调用，与打印功能菜单没什么两样。分页的问题仍然存在，只不过，可以让用户不用去点菜单，直接在网页中的一个按钮，或一个链接里面调用罢了。
三 、使用print css
这是一种最理想的实现web套打的方法。这种方法通过在html文档中，嵌入打印相关的css样式，来实现对html文档输出打印的控制，比如设置纸张大小，纸张纵横方向，打印边距，分页等。显而易见，这种方式成本小，不需要下载任何插件，而且跨平台性非常好。print css推出已经有些时日，但遗憾的是，至今没有一个厂商的浏览器很好地实现了这些标准，这使得程序员目前还不能利用print css进行实际的开发。
四 、使用PDF文件
用这种方式，就是从服务器端下载一个pdf文件流，在IE中用adobe插件打开，然后用adobe的打印菜单进行打印，虽然这种方案，也能实现精确套打，但需要下载adobe插件。这是国外报表工具经常推荐的一种打印方法，但在pdf不那么普及的中国，这种方案不是最好选择。
五 、采用纯ActiveX
这种方案就是下载一个控件，票据的数据不再以html方式呈现，而是呈现在ActiveX中。这种方案的优点是打印的精确度高，分页的可控性好，但缺点也是很明显的，嵌入ActiveX控件破坏了web应用的整体html风格，且这样的控件比较大（一般超过1M），下载颇费时间）。市场上的非java类报表产品，一般都采用这种方案。
六 、采用Applet方式
采用Applet方式，分页或精确打印，都可以做到完美，但缺点也很明显，表现在：
安装Applet成本巨大。需要下载十几M的文件。
打印报表时，需要重新向服务器检索数据，效率低。因为Applet方案，一般采用html方式呈现数据，打印时Applet必须向服务器检索同一张票据的数据，看上去，是打印了当前页的票据，实际上，Applet根本不会用当前html页的数据来打印，而是向服务器下载数据到Applet中来打印。也就是说，打印的话，必须两次请求，一次html呈现，一次用来打印。
不能解决连续打印。比如，不是仅打印一张票据，而是连续一次打印若干个票据。
不能解决打印机设置问题，如存在多台打印机时，总是需要手工选择，打印到哪一台打印机。
市场上java类的报表工具，一般推荐Applet方式来实现打印。
七 、轻量级的ActiveX打印方式
-----ScriptX-----
ScriptX的免费版本好点,已经能满足大部分的需求.
MeadCo's ScriptX控件有两种使用方式，一种是做为免费版本使用，一种是做为收费版本使用，免费版本支持的功能要少些，不过最重要也是最常用的页面设置，它还是提供的，因此使用免费版本即可。不过这两个版本用的都是同一个cab文件，只不过在代码设置中有一些不同。
-----PAZU (四方)-----
PAZU 个人或者商业使用均真正免费授权，无IP或者域名限制。
PAZU自2009年6月起采用免费的许可,申请时，您必须有确定的IP地址或者域名（主机名），PAZU是绑定IP或者域名的，IP或域名尚未确定的我们不能颁发授权，另外，授权一经颁发就不能修改绑定。 绑定的IP和域名必须是最终用户的，所以，最终用户的应用网站必须和4Fang网站做好链接，否则 PAZU会因为无法验证授权的合法性而不能正常工作(内网应用除外)。
企业可以购买开发集成版（适合项目集成或者产品开发公司，提供KeyGen工具，自己生成许可授权，不限制发行)
-----jatoolsPrinter(杰表.打印控件)-----
免费版本只能在192.168.*** 网段使用,2.0之前的版本有免费版本,2.0之后是收费的。目前最新版本是4.2.他们可以通过web脚本来选择输出打印机，纸张大小，打印方向等，不必每次手工设定。
对于简单的打印，我们用IE的功能就可以了，对于需要复杂的设置的，建议使用轻量级的ActiveX打印方式。在接下来的系列教程里，我们会一一介绍。
---------------------------------------二 使用IE的打印功能进行一般的网页打印-----------------------------
在我们进行web开发的时候，通常会需要用到打印，然而，由于web技术的限制及考虑到安全的问题，一直以来，web打印的功能都是非常弱的，对此，我们也只能接受。也许你在开发过程中经常会遇见客户对你说，“你们系统的打印太差了，你看看excel的打印多好啊，”，面对这样的用户，我们除了苦笑，还能说什么呢？如果你对着他们去解释什么是BS架构，什么是CS架构，不但不能够解决问题，反而会招致用户的反感。
那么，我们是不是就什么都不能做了呢？答案当然是否定的。利用现有的web技术，再加上针对求的灵活实现，我们也可以做出漂亮的打印出来。
在接下来的几篇文章里，我将分别介绍几种打印的方法或技术。这些方法有的很简单，有的稍微复杂一点。我们还是从基础做起，先了解最简单的打印技术，然后再一步一步提高，这样也有利于消化技术。
本篇内容讲述利用IE提供的简单的打印功能，进行打印的设置以及打印。
在IE里打印，我们可以通过javascript来调用window.print()函数实现。下面是一个简单的代码示例。
Java代码 收藏代码
<input type='button' value='打印' onclick='javascript:window.print()'/>
点击“打印”后，即可弹出打印窗口,如下图
通过这个函数，可以实现最简单的打印功能。如果我们要对纸张，页边距进行设置，那该怎么做呢？ 我们知道，我们可以方便地通过 Internet Explorer 用户界面更改页边距、页眉和页脚设置和默认 Internet Explorer 打印机，IE也提供了一个叫WebBrowser 控件来供我们调用，通过调用，可以在页面上调出打印的设置窗口，在设置窗口里，用户可以更改页边距、页眉和页脚设置等。（但是，在 Internet Explorer 或 WebBrowser 控件下没有以编程方式更改这些设置的方法。在本系列教程的第三篇，我将介绍如何在页面上通过编程的方式来更改设置。）我们可以在页面上输入如下代码来调用WebBrowser 控件。
Java代码 收藏代码
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" id=wb name=wb ></OBJECT>
<input type='button' value='打印' onclick='javascript:wb.ExecWB(6,1)'/>
<input type='button' value='打印预览' onclick='javascript:wb.ExecWB(7,1)'/>
<input type='button' value='页面设置' onclick='javascript:wb.ExecWB(8,1)'/>
上例中的OBJECT就是IE提供的打印控件，叫WebBrowser，我们在网页中可以用我们设置的id或name来引用它。
这个对象有很用法，其中涉及到打印的有下面三项。
wb.ExecWB(6,1) 打印
wb.ExecWB(7,1) 打印预览
wb.ExecWB(8,1) 打印页面设置
点击“打印”按钮，即可弹出和window.print()函数一样的窗口。 点击打印预览，即可预览当前页面。
点击“页面设置”，即可弹出页面设置窗口，在设置窗口里，可以对边距，页眉等进行详细设置。
通过以上三个功能，我们就可以进行简单的打印和设置了，对于一般的打印需求来说基本足够。
这里需要说明的是，“页面设置”中的各个值，是存储在用户的注册表中。
