css之分页打印的示例代码

久未挥毫，近日于一项员工入职项目之中遇到挑战。此项目需构建一系统，具备批量打印个人信息之功能。初次接触此类需求，我便上网解决方案。于中，偶遇jquery中的PrintArea API，虽未深究其详，然知其可调用浏览器打印功能。尝试使用此API时，却发现打印内容空白，毫无信息。

几经周折，我于网上查找资料，甚至赴jquery官网此API。多见反馈称此API昔日可支持打印，现需于源码增一句代码方可。虽努力尝试，然未能理解其深意，故暂且作罢。然我深信，非我之过，而是功夫未到。若汝等有兴趣，不妨尝试此路，或有所得。

方案虽阻，并未停滞我之脚步。我发现了window.print()方法，此方法竟可直接利用window功能实现打印，令我欣喜若狂。乌云随即而至。批量打印时，网页内容紧密排列，未能达到预期效果。本以为已解决问题，谁料世事难料。

深入研究分页打印之时，我首先想到于每一分页容器设定高度，使其符合A4纸高度，后续内容则自然转入。想象美好，现实却不尽人意。后得同事指点，尝试使用css print属性实现强制分页。见文档说明时，我见到希望之光。当我尝试使用css print属性时，结果却未能如愿。几经挫折，我深感困惑，思索为何无法实现。后经观察发现，问题所在：要打印的内容外层有两个div容器，为拼接的html并append于外层容器之中，打印时css print属性失效。欲使用css print属性实现分页功能者，须谨记打印内容外层仅设一容器。

此css print属性如下：

接下来是分页实例（此处采用网上例子）：

```html

```

此文至此结束，但愿对众人学习有所助益，亦望大家多多支持狼蚁SEO。