c-lodop自定义分页打印

最新推荐文章于 2024-01-18 11:08:57 发布

因为热爱本身，就是奖励

最新推荐文章于 2024-01-18 11:08:57 发布

阅读量3.1k

点赞数

分类专栏：前端

前端专栏收录该内容

35 篇文章

订阅专栏

方式一:

今天因为要批量打印，而且好要分页打印，所以为了这个打印分页，我和同事在网上找了一下，花费了一点时间。

结果通过在把 <div style='page-break-after: always;'></div> 放在css样式的最后方，就完成啦打印分页功能。

感觉超牛逼。又学会了一个小窍门。我就把他记录下来，怕以后忘记。

方式二:

最近碰到一个需求，需要前端将在一个页面内调用浏览器的window.print()方法，打印当前页面。但是呢，需要将三个DIV分页打印：

<div style="height:290mm">我是封面</div>
<div style="height:290mm">我是目录，你不知道我的内容有多长</div>
<div>我是正文，我需要从一个新页面开始展示</div>
1
2
3
开始我想到的办法是，将前两个div的高度设置为 290mm(A4纸的高度)，如上述代码。这样的话，他们正好各占据一面，正文自动在新页面开始，但这只适用于目录不超过一页的情况，而且必须是A4纸打印，而且，290mm是A4纸的高度，你不知道用户会不会设置页边距，页边距会设置多少。显然这种方式治标不治本。

后来，我发现可以使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面，代码如下：

<div style="page-break-after:always">我是封面</div>
<div style="page-break-after:always">我是目录，你不知道我的内容有多长</div>
<div>我是正文，我需要从一个新页面开始展示</div>
1
2
3
这样的话，无论div有多长，在它之后一定会新开一个页面再打印。就避免了计算高度的问题。完美解决我的问题。

方式三:

首先我们在打印之前数据肯定是要准备好的，首先把标题题头等信息准备好，然后循环列表采用json串的方式，这样方便遍历和修改

直接把list转换成json，然后赋值给一个对象的某个属性。这样前台就可以直接遍历json串了。

json = JsonUtiles.getJsonDataFromCollection(list);//分页newpage用，传递json串，然后解析

finalModel.setJsonString(json);
model.addAttribute("singleInfo",finalModel);

这样json串就传递到前台了。

前台只需 var jsonString = '${singleInfo.jsonString}';
　　　　 var jsonList = eval("(" + jsonString + ")");

这样就可以获得json串了。

下面开始分页(下面是lodop部分)：

　　 alert("页码 : "+totalPages);

alert("每页 : "+pageRecorders+"条");

for(var i=0;i<totalPages;i++){ //总页数

var tvalue = 0;

//列头--------------------------------------------

　　　　这里如姓名，性别，所在班级等　　　　

　　　　LODOP.ADD_PRINT_TEXT("30mm","12mm","22mm","5mm","记账日期");
　　　　LODOP.ADD_PRINT_TEXT("30mm","32mm","22mm","5mm","记账时间");

for(var j=i*pageRecorders;j<(i+1)*pageRecorders;j++){

if(j>=totalRows){

break;

}

//数据---------------------------------------------

　　　　这里如：小红女 A12班

　　 LODOP.ADD_PRINT_TEXT((38+(tvalue*6))+"mm","12mm","20mm","10mm",jsonList[j].chargeDate);
　　 LODOP.ADD_PRINT_TEXT((38+(tvalue*6))+"mm","32mm","25mm","5mm",jsonList[j].chargeTime);

tvalue++;

}

LODOP.NewPage();

}

最后还可以加上合计等 :

LODOP.ADD_PRINT_TEXT("118mm", "12mm", "80mm", "5mm",男生: "+123+" 女生:"+guestSum);

LODOP.SET_PRINT_STYLEA(0, "PageIndex", "Last");

0 代表当前元素，pageindex代表页码 last 代表最后一页

这样lodop 分页打印就完成了。