使用css设置打印

我们都知道A4的尺寸是210mm * 297mm,在css中，我们可以直接使用毫米的单位来设置页面的宽高，当然你也可以使用相应的像素进行设置，不过只是通过body或者html来设置宽高的话，可能也会出现问题，而在这里我们需要使用@page来对页面进行定义，@page主要是用于打印的时候定义页面的类型，比如A4，A5，A3等等。下面先来看一下@page的使用方法。
[cc lang=”css”]@page{
size: A4;
margin: 0;
}[/cc]
另外在设置好@page后，我们可能还会需要设置分页，分页很简单，直接使用page-break-before:always;或者page-break-after:always;就可以设置分页，在网页中是不会显示任何效果的，不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中，使用如下：
[cc lang=”css”]@media print{
.page-break{
page-break-before:always;
}
}[/cc]
.page-break是需要分页的class的元素。

必须注意的问题：
1、如果你的页面使用的table布局，那么page-break-before:always;不能写在td和tr中，也就是说，table是不能被分页的，这是所有浏览器都不支持的。
比如你的代码如下：
[cc lang=”html”]

1

2

3

4

5

6

7

8

[/cc]
这样的代码不论你测试多少次，都是无法进行分页的，经过我的测试，在所有的浏览器中都无法实现分页，并且通过打印机打印后，也是无法分页的！
对于table，我们只能对整个table进行分页，比如下面的代码：
[cc lang=”html”]

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

[/cc]
以上两个table就可以实现完美的分页，不过网上有人说使用page-break-inside:avoid;可以实现对td或者tr的分页，不过我没有进行尝试，因此不敢断言是否分页成功。
2、在div中进行分页
除了table之外，在div中就更加方便使用了，只要你想在任何一个div处进行分页，那就直接使用分页代码即可，比如下面的代码：
[cc lang=”html”]

[/cc]
你可以尝试在浏览器中预览打印的pdf效果，这个div肯定会分成3页进行显示。

最终页面的效果应该如下：
[cc lang=”html”]

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

[/cc]