用CSS来强制控制打印分页:

page-break-before: always; //这个是在盒子前面插入分页符 page-break-after: always; //这个是在盒子后面插入分页符

除了always还有一些其他属性,可以看下

auto :对页面分割没有影响。 
always:强制在元素后出现页分割符。 
avoid :避免在元素后出现页分割符。 
left :在元素后面插入页分割符直到它到达一个空白的左页边。 
right :在元素后面插入页分割符直到它到达一个空白的右页边。 
inherit :使用与父元素相同的属性值。

示例

第一页的内容 <div style="page-break-before: always;"></div> 第二页的内容 <div style="page-break-before: always;"></div> 第三页的内容

注意啦: 用这个css属性,你的元素一定不能应用于:脱离文档流的块级元素,比如(absolute, fixed, float),不然会导致分页无效,唉,我就是被float坑的

好了接下来就开始正式的工作了

打印数据的格式:

[ {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, {num: 0000000, qr: "二维码的地址", name: '小明', phone: 13800138000}, ]

需求: 每9个一个版面

下面是我生成版面的代码:

var index = 0; var start = 0; var step = 9; for(var i=0, len=data.length; i<len; i++){ if(i%step == 0){ generatePage(data.slice(start,start+step)) start = start+step } } //生成一个版面 function generatePage(data){ var html = ''; var div = document.createElement('div'); div.style.pageBreakBefore = 'always' for(var i=0, len=data.length; i<len; i++){ var item = data[i]; //这里替换成你先要的格式,如果比较复杂,推荐网上找一个比较简单的模板引擎来搞 html+='<div class="item"><div class="img"><img src="'+item.qr+'" alt=""></div><div class="info"><p><font>卡号:</font>'+item.num+'1</p><p><font>姓名:</font>'+item.name+'</p><p><font>联系方式:</font>'+item.phone+'</p></div></div>' } div.innerHTML = html; document.body.appendChild(div); } //最后在调用打印接口 window.print();

css代码我就不放了,下面是效果图:

这个是排版的:
排版的

打印的效果图
打印的效果图

以上是我踩坑打印分页的一个记录,搞完了,愉快的下班~~~