用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代码我就不放了，下面是效果图：

这个是排版的:

打印的效果图

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