使用CSS设置打印

我们都知道A4的尺寸是210mm * 297mm,在css中，我们可以直接使用毫米的单位来设置页面的宽高，当然你也可以使用相应的像素进行设置，不过只是通过body或者html来设置宽高的话，可能也会出现问题，而在这里我们需要使用@page来对页面进行定义，@page主要是用于打印的时候定义页面的类型，比如A4，A5，A3等等。下面先来看一下@page的使用方法。

@page{

另外在设置好@page后，我们可能还会需要设置分页，分页很简单，直接使用page-break-before:always;或者page-break-after:always;就可以设置分页，在网页中是不会显示任何效果的，不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中，使用如下：

@media print{

.page-break是需要分页的class的元素。

必须注意的问题：

table布局

那么page-break-before:always;不能写在td和tr中，也就是说，table是不能被分页的，这是所有浏览器都不支持的。
比如你的代码如下：

<table>

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

<table class="page-break">

以上两个table就可以实现完美的分页，不过网上有人说使用page-break-inside:avoid;可以实现对td或者tr的分页，不过我没有进行尝试，因此不敢断言是否分页成功。

在div中进行分页

除了table之外，在div中就更加方便使用了，只要你想在任何一个div处进行分页，那就直接使用分页代码即可，比如下面的代码：

<div class="page-break">11111111111111</div>

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

最终页面的效果应该如下：

<style>