方式一:

<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自定义分页打印相关推荐

  1. js调用打印,并且将页面缩放后进行打印,同时可自定义分页打印demo

    话不多说,直接上demo,注释备注相当清晰 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  2. c# winform 自定义模板 printDocument 自定义分页打印

    //按钮事件 PrintPreviewDialog ppvw = new PrintPreviewDialog();             ppvw.PrintPreviewControl.Zoom ...

  3. vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印(三)

    目录 前言 一.自定义页眉内容 二.分页文档打印 1.加入分页符 2.打印方法 3.打印模块完整代码 总结 前言 随着在线办公场景越来越多,同时需要各式各样办公软件,在开发时就用得到在线文档来内容指定 ...

  4. Lodop分页打印每页显示页头页尾

    Lodop分页打印页头页尾问题 1. Lodop页头页尾打印标签 1.1 caption标签:caption标签的内容只显示在首页 1.2 thead标签: 页头标签, 此标签的内容为页头, 显示在每 ...

  5. jqprint 分页打印_JS实现页面打印(整体、局部)

    我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印 现在就轻松实现了页面的打印,但是这种方 ...

  6. LODOP不同电脑打印效果不同排查

    1.位置不同,偏移问题. 详细的相关偏移问题的博文: LODOP不同打印机出现偏移问题 2.样式问题. 本机浏览器解析样式不同 ,相关超文本样式博文: Lodop打印控件传入css样式.看是否传入正确 ...

  7. vue-print-nb 实现页面打印(含分页打印)

    Web 实现页面打印 安装 官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装 打印组件 npm install vue-print-nb ...

  8. Java实现表格打印翻页_简单又实用的小文章来了----表格分页打印的那些小事(2)...

    前言 之前写过一篇表格分页打印的实践,其基本思路是按照一比一还原打印宽高,然后根据页面高度内容以及内容长度进行粗略计算,针对不能显示的进行内容分割. 相比上次逻辑稍微繁琐一点,今天分享的方式是更加简单 ...

  9. python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)...

    python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页) 一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 fro ...

最新文章

  1. 多线程端点服务发布程序(摘)
  2. Java-反射简介及例子
  3. 提防iostream使用中的一个“陷阱”
  4. NodeJs两个简单调试技巧
  5. dubbo集群服务下一台服务挂了对服务调用的影响
  6. 前端学习(2511):路径出错
  7. 华为鸿蒙3799跟4799有啥区别,华为鸿蒙智慧屏出世!3799元高价,是增智慧还是智商税?...
  8. 人脸识别签到_矿区签到出“新招” 人脸识别考勤上线
  9. 无锡 计算机学校排名,无锡中职学校有哪些 前20排名
  10. 中台之上(十三):探讨支持组装式开发的业务架构设计方法
  11. php无缝滚动文字,使用JS如何实现文字无缝滚动
  12. linux简介及安装使用
  13. python爬虫——使用selenium爬取qq群的成员信息(全自动实现自动登陆)
  14. 4×4键盘板:ATMEGA328接口
  15. PCBA上电容开裂短路,怎么又是设计的错?
  16. 解决Unknown column ‘xxx‘ in ‘where clause‘问题
  17. Java初学 通过接口实现猫狗跳高
  18. C语言知识-零零散散(三)
  19. 梅卡尔大学-IOT-前端笔记
  20. 32位汇编语言学习笔记(45)--测试简单文件操作接口(完)

热门文章

  1. asp.net mvc 网站生成二维码
  2. [Pandas] DataFrame的columns属性
  3. 计算机整体硬盘销毁,如何完全销毁硬盘上的数据?
  4. Python学习出来好找工作吗?好找工作的关键是什么?
  5. 云计算基础设施平台iaas(openstack)超级详细搭建(十三) 安装Trove服务
  6. Numpy 数组切片
  7. Java_笛卡尔积计算
  8. linux gtestgmock安装
  9. javascript 动态设置样式style
  10. 世界杯开赛在即,告诉你5个用区块链玩转球赛的秘密 | 内附独家资源