c-lodop自定义分页打印
方式一:
<div style='page-break-after: always;'></div>
今天因为要批量打印,而且好要分页打印,所以为了这个打印分页,我和同事在网上找了一下,花费了一点时间。
结果通过在把 <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部分):
var totalRows = jsonList.length; //总记录条数,这里就是在前台获得的json串
var hasPreviousPage = false; //是否有下一页
var pageHeight = 140; //纸张高度(单位mm)
var pageRecorders = parseInt((pageHeight-40)/6); //纸张高度去掉页眉数据,去掉上面的一些标题页码等占用的距离,如果没有直接写就可以,本文高度为 6mm,所以除以6
var totalPages = 1;
if((totalRows % pageRecorders) == 0) {
totalPages = parseInt(totalRows / pageRecorders);
}else{
totalPages = parseInt(totalRows / pageRecorders) + 1;
}
if(totalPages == 1){
hasPreviousPage = false;
}else{
hasPreviousPage = true;
}
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 分页打印就完成了。
c-lodop自定义分页打印相关推荐
- js调用打印,并且将页面缩放后进行打印,同时可自定义分页打印demo
话不多说,直接上demo,注释备注相当清晰 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- c# winform 自定义模板 printDocument 自定义分页打印
//按钮事件 PrintPreviewDialog ppvw = new PrintPreviewDialog(); ppvw.PrintPreviewControl.Zoom ...
- vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印(三)
目录 前言 一.自定义页眉内容 二.分页文档打印 1.加入分页符 2.打印方法 3.打印模块完整代码 总结 前言 随着在线办公场景越来越多,同时需要各式各样办公软件,在开发时就用得到在线文档来内容指定 ...
- Lodop分页打印每页显示页头页尾
Lodop分页打印页头页尾问题 1. Lodop页头页尾打印标签 1.1 caption标签:caption标签的内容只显示在首页 1.2 thead标签: 页头标签, 此标签的内容为页头, 显示在每 ...
- jqprint 分页打印_JS实现页面打印(整体、局部)
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印 现在就轻松实现了页面的打印,但是这种方 ...
- LODOP不同电脑打印效果不同排查
1.位置不同,偏移问题. 详细的相关偏移问题的博文: LODOP不同打印机出现偏移问题 2.样式问题. 本机浏览器解析样式不同 ,相关超文本样式博文: Lodop打印控件传入css样式.看是否传入正确 ...
- vue-print-nb 实现页面打印(含分页打印)
Web 实现页面打印 安装 官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装 打印组件 npm install vue-print-nb ...
- Java实现表格打印翻页_简单又实用的小文章来了----表格分页打印的那些小事(2)...
前言 之前写过一篇表格分页打印的实践,其基本思路是按照一比一还原打印宽高,然后根据页面高度内容以及内容长度进行粗略计算,针对不能显示的进行内容分割. 相比上次逻辑稍微繁琐一点,今天分享的方式是更加简单 ...
- python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)...
python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页) 一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 fro ...
最新文章
- 多线程端点服务发布程序(摘)
- Java-反射简介及例子
- 提防iostream使用中的一个“陷阱”
- NodeJs两个简单调试技巧
- dubbo集群服务下一台服务挂了对服务调用的影响
- 前端学习(2511):路径出错
- 华为鸿蒙3799跟4799有啥区别,华为鸿蒙智慧屏出世!3799元高价,是增智慧还是智商税?...
- 人脸识别签到_矿区签到出“新招” 人脸识别考勤上线
- 无锡 计算机学校排名,无锡中职学校有哪些 前20排名
- 中台之上(十三):探讨支持组装式开发的业务架构设计方法
- php无缝滚动文字,使用JS如何实现文字无缝滚动
- linux简介及安装使用
- python爬虫——使用selenium爬取qq群的成员信息(全自动实现自动登陆)
- 4×4键盘板:ATMEGA328接口
- PCBA上电容开裂短路,怎么又是设计的错?
- 解决Unknown column ‘xxx‘ in ‘where clause‘问题
- Java初学 通过接口实现猫狗跳高
- C语言知识-零零散散(三)
- 梅卡尔大学-IOT-前端笔记
- 32位汇编语言学习笔记(45)--测试简单文件操作接口(完)