使用css设置打印

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

@page{
  size: A4;
  margin: 0;
}

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

@media print{
  .page-break{
    page-break-before:always;
  }
}

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

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

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="page-break"></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td class="page-break"></td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

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

<table class="page-break">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td ></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>
<table class="page-break">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td ></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

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

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

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

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

<style>
body{
  width:210mm;
  height:297mm;
}
@page{
  size: A4;
  margin: 0;
}
@media print{
  .page-break{
    page-break-before:always;
  }
</style>
<div class="page-break">11111111111111</div>
<div class="page-break">22222222222222</div>
<div class="page-break">33333333333333</div>
<table class="page-break">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td ></td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>
<table class="page-break">
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
  </tr>
</table>

3 thoughts on “使用css设置打印”

    1. 请设置一下body的宽高,如果body的宽高已经设置为A3的,那么可以直接使用@page {width: 210mm}等设置为A3纸张的宽高

发表评论

电子邮件地址不会被公开。 必填项已用*标注