用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代码我就不放了,下面是效果图:
这个是排版的:
打印的效果图
以上是我踩坑打印分页的一个记录,搞完了,愉快的下班~~~