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

于 2020-11-02 10:10:18 发布 2770 收藏
分类专栏： 前端 文章标签： html js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asxyxxx/article/details/109443255
版权

Lodop分页打印页头页尾问题

1. Lodop页头页尾打印标签

1.1 caption标签:caption标签的内容只显示在首页

1.2 thead标签: 页头标签, 此标签的内容为页头, 显示在每页的顶部

1.3 tbody标签: 内容体标签, 此标签的内容为内容体

1.4 tfoot标签: 页尾标签, 显示在每页的底部

标签实例代码:

<div id="div2">
<style>table,th{border:none;height:18px} td{border: 1px solid #000;height:18px}</style>

<table border=0 cellSpacing=0 cellPadding=0  width="100%" height="200" bordercolor="#000000" style="border-collapse:collapse">
<caption><b><font face="黑体" size="4">产品入库汇总清单</font></b><br>(Caption内容只在首页)</caption>
<thead>
  <tr>
    <th width="33%">日期：</th>
    <th width="67%" colspan="2">部门名称:</th>
  </tr>
  <tr>
    <td width="33%"><b>入库单编号</b></td>
    <td width="33%"><b>产品名称</b></td>
    <td width="32%"><b>数量</b></td>
  </tr>
</thead>
<tbody>
  <tr>
    <td width="33%">1</td>
    <td width="33%">产品A</td>
    <td width="34%">100</td>
  </tr>
  <tr>
    <td width="33%">2</td>
    <td width="33%">产品B</td>
    <td width="34%">200</td>
  </tr>
  <tr>
    <td width="33%">3</td>
    <td width="33%">产品C</td>
    <td width="34%">300</td>
  </tr>
    <tr>
    <td width="33%">4</td>
    <td width="33%">产品D</td>
    <td width="34%">400　</td>
  </tr>
  <tr>
    <td width="33%">5</td>
    <td width="33%">产品E</td>
    <td width="34%">500</td>
  </tr>
    <tr>
    <td width="33%">6</td>
    <td width="33%">产品F</td>
    <td width="34%">600</td>
  </tr>
  <tr>
    <td width="33%">7</td>
    <td width="33%">产品J</td>
    <td width="34%">700</td>
  </tr>
    <tr>
    <td width="33%">8</td>
    <td width="33%">产品H</td>
    <td width="34%">800</td>
  </tr>
  <tr>
    <td width="33%">9</td>
    <td width="33%">产品I</td>
    <td width="34%">900</td>
  </tr>
    <tr>
    <td width="33%">10</td>
    <td width="33%">产品J</td>
    <td width="34%">110</td>
  </tr>
  <tr>
    <td width="33%">11</td>
    <td width="33%">产品K</td>
    <td width="34%">120</td>
  </tr>
    <tr>
    <td width="33%">12</td>
    <td width="33%">产品L</td>
    <td width="34%">130</td>
  </tr>
  <tr>
    <td width="33%">13</td>
    <td width="33%">产品M</td>
    <td width="34%">140</td>
  </tr>
  <tr>
    <td width="33%">14</td>
    <td width="33%">产品N</td>
    <td width="34%">150</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th width="100%" colspan="3"><b>经办人：</b></th>
  </tr>
  <tr>
    <th width="100%" colspan="3">　</th>
  </tr>
  <tr>
    <td width="100%" colspan="3"><b>带格线的每页备注：</b></td>
  </tr>
</tfoot>
</table>
</div>

注:colspan为单元格数, 宽度拥有单元个数

​ Lodop可自动分页, 设定好页面的大小和tbody的大小, 打印时即可自动分页,

<!--分页页码 -->
<th width="100%" colspan="12" style="text-align:center;height:auto;" tindex="1">第<font tdata="PageNO"  color="blue">##</font>页/共<font tdata="PageCount"  color="blue">##</font>页</th>

示例效果:在这里插入图片描述

2. 常用的Lodop打印函数

2.1 常用的Lodop打印函数

●PRINT_INIT(strPrintTaskName)打印初始化
●SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
●ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
●ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
●ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
●ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
●SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
●PREVIEW打印预览
●PRINT直接打印
●PRINT_SETUP打印维护
●PRINT_DESIGN打印设计

2.2 函数的使用方法:

var LODOP; //声明为全局变量
var iRadioValue=1;
function PrintOneURL(){
    LODOP=getLodop();  
    LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_按网址打印表格");
    LODOP.ADD_PRINT_TBURL(46,10,800,300,document.getElementById("T1").value);
    LODOP.SET_PRINT_STYLEA(0,"HOrient",3);
    LODOP.SET_PRINT_STYLEA(0,"VOrient",3);
    LODOP.PREVIEW();			
};	
function PreviewMytable(){
    LODOP=getLodop();  
    LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_预览打印表格");
    LODOP.ADD_PRINT_TABLE(100,5,500,280,document.getElementById("div1").innerHTML);
    LODOP.SET_PRINT_STYLEA(0,"TableHeightScope",iRadioValue);		
    LODOP.PREVIEW();
};	
function DesignMytable(){
    LODOP=getLodop();  
    LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印设计表格");
    LODOP.ADD_PRINT_TABLE(100,5,500,280,document.getElementById("div1").innerHTML);
    LODOP.SET_PRINT_STYLEA(0,"TableHeightScope",iRadioValue);		
    LODOP.PRINT_DESIGN();
};		
function PrintInFullPage(){
    LODOP=getLodop();  
    LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整页表格");
    LODOP.SET_PRINT_PAGESIZE(2,0,0,"A4");	
    LODOP.ADD_PRINT_TABLE("2%","1%","96%","98%",document.getElementById("div1").innerHTML);
    LODOP.SET_PREVIEW_WINDOW(0,0,0,800,600,"");
    LODOP.PREVIEW();				
};	
function PrintNoBorderTable(){
    LODOP=getLodop();  
    LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_无边线表格");
    LODOP.ADD_PRINT_TABLE(50,10,"50%",220,document.getElementById("div2").innerHTML);
    //LODOP.SET_PRINT_STYLEA(0,"Top2Offset",-40); //这句可让次页起点向上移
    LODOP.ADD_PRINT_HTM(2,0,"50%",200,"<body style='margin-top:0'>表格后面用<font color=blue>ADD_PRINT_HTM</font>附加其它备注</body>");

    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
    LODOP.PREVIEW();
};		
function check(thisValue){
    iRadioValue=thisValue;
}

参考链接(LODOP官网): http://www.lodop.net/LodopDemo.html

蠢死的脑细胞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Lodop打印表格带页头页尾 自动分页每页显示头尾
weixin_30256901的博客
11-20 1091
Lodop中有两种专门给超文本表格的方式，ADD_PRINT_TABLE和ADD_PRINT_TBURL，该方式只能用于单个表格，表格外的内容不显示，是专门用于打印html超文本表格的。使用这两个语句，内容在thead和tfoot标签内，被当做页头页尾，每页的高度是否包含页头页尾是可以设置的，默认是不包含的。Lodop打印表格带页头页尾 高度是否包含页头页尾注意：由于ADD_PRINT_TABLE...
lodop实现打印，支持分页打印
博客
11-07 8864
1.官网下载 http://www.lodop.net/download.html 建议下载“Lodop最新综合版”和“最新技术手册” 2.安装相应的文件（install_lodop32.exe、install_lodop64.exe、云打印CLodop_Setup_for_Win32NT.exe），将LodopFuncs.js放入你的项目中，在使用时需要引入。 3.接下来按照技术手册
LODOP有选择性显示页眉页脚
caihuihai的博客
07-07 1523
LODOP.ADD_PRINT_HTM("95%", "20px", "95%", "100%",arrays[1]["foot"]);LODOP.SET_PRINT_STYLEA(0,"ItemType",1);  //1表示页眉页脚 LODOP.SET_PRINT_STYLEA(0,"PageIndex","Last-1");  //新加的内
c-lodop自定义分页打印
欲寄彩笺兼尺素，山高水阔知何处
07-07 1931
方式一: <divstyle='page-break-after:always;'></div> 今天因为要批量打印，而且好要分页打印，所以为了这个打印分页，我和同事在网上找了一下，花费了一点时间。 结果通过在把<divstyle='page-break-after:always;'></div> 放在css样式的最后方，就完成啦打印...
lodop打印分页方法
小李李
01-04 6414
//表格自动分页，下一页没页头、页脚、表头 LODOP.ADD_PRINT_HTM(10,"5%","90%","90%",document.getElementById("print").innerHTML); //表格自动分页，下一页有页头、页脚、表头 //内容 LODOP.ADD_PRINT_TABLE(160,"5%","90%","60%",
Lodop表格打印，分页数据都一样问题
金蝶ERP解说
12-23 709
今天用Lodop打印表格，出了个Bug，分页打印时，分页是分页了，但是每次读取打印、预览时，每一页的数据都一样，当我第二次打开打印预览的时候，就能恢复正常 折腾了好久，终于发现问题所在，首先，我的table不是静态的，使用js加载出来的，打开网页审查元素发现，js将表格都插在了thead里面，所以导致错误，要修正也很简单，将正文数据插回到tbody里，或者也不要tbody，但不能扔在thead...
原生js 打印 以及 自定义页眉页脚的一些感悟
missevery123的博客
02-28 1567
最近遇到一些需求使用原生js进行打印，期间遇到很多困难，我过资料查找用了自己的一些方法解决，如果你有更好的解决办法欢迎评论区留言。 问题一 打印元素父盒子设置了溢出隐藏，导致元素隐藏了，打印不完整。 ...
LODOP实现每个页面都有表头(有注释)
weixin_50255994的博客
12-03 1264
表格自动分页，下一页没页头/页脚(默认) LODOP.ADD_PRINT_HTM(0,0,'100%','100%',document.getElementById("print-all").innerHTML); 表格自动分页，下一页有页头/页脚 //内容 LODOP.ADD_PRINT_TABLE(140,"2.5%","95%","65%",document.getElementById('print-bodyer').innerHTML); //增加表格项(也可为超文本/纯文字) ...
lodop转到其他html页面,vue项目中使用Lodop实现批量打印html页面和pdf文件
weixin_35128928的博客
06-05 532
1.Lodop是什么？Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下：●PRINT_INIT(strPrintTaskName)打印初始化●SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeig...
lodop 使用教程之图文详解 + 详细方法/参数的配置说明
绝影
05-31 6561
lodop 使用教程之图文详解 + 详细方法/参数的配置说明 废话不多说先呈上官网 : 云官网 : http://www.c-lodop.com/ 官网 : http://www.lodop.net/ （建议网速不怎么样的，不要使用这个网站了） 这个就不用多讲了，当然云官网的速度要快一些，里面的内容展示方式都是一样的，包括版本也是同步更新的，这个不用担心的。 本教程以云官网为例 : 首先打开百度输...
Lodop打印表格包含页眉和页码
liu18130617928的博客
07-21 1174
// 定义的样式字符串 let styleClass=`<style> tr, td { padding: 0px; margin: 0px; text-align: center; word-break:break-all; } </style>` // 定义变量打印的内容区域的表格高度不同 let height = '180mm' if(this.dataObj.info.curType.id === 1) { height = '765px' } else if (this.d
lodop分页，页眉页脚，foreach分页代码
weixin_30570101的博客
06-06 262
<!-- 本例是一个表格的打印 说明： 1、使用object对象来注册一个打印控件 2、使用document.getElementById获取到打印控件，使用CheckLodop检查是否安装打印控件，检验版本 3、使用c:forEach标签来遍历数据，使用EL来读取属性 4、使用table来展现数据，使用到了thead、tfoot、tbody，主要是用于分页打印，这里设置每...
web页面打印插件
iteye_11623的博客
04-19 174
今天帮同事查web页面直接打印插件，需求就是直接在web页面内打印，但不弹任何设置窗体。 对比了几个最后选了Lodop和pazu。 一个免费一个收费， lodop确实挺不错的，可惜老大还是想免费优先，结果试用了pazu， 确实方便的狠，支持的设置挺多的。不过我要的功能很简单： 引入控件： [code="html"] [/code...
Bootstrap jquery.twbsPagination.js动态页码分页不刷新页码问题解决
qq_35407131的博客
05-15 169
问题：已经有一次查询的基础之后，重新输入查询条件，查询结果正确，总跳数正确，但页码没有刷新。 页码展示部分 <tfoot id="pageTable"> <tr> <td colspan="2"></td> <td colspan="8"> <div class="pull-right page-box"> <div class="pagination-info"&g
lodop 报表套打分页、每页带有表头等【解决问题：每页底部最好一条数据显示不全、遗漏等问题】
李忠祥个人博客
07-04 3524
function DoPrint(){//打印 var LODOP=getLodop(); LODOP.PRINT_INIT("test套打"); LODOP.SET_PRINT_PAGESIZE(1, 0, 0,"A4");//设置纸张A4打印 横向 LODOP.SET_PRINT_STYLE("Alignment",2);...
Lodop 打印固定页眉页脚，自动分页打印。
shan1774965666的专栏
02-26 4730
引入lodop打印的js。 在页面定义一个需要打印的区域，打印时获取打印内容。  //打印         function Print() {             var LODOP = getLodop();             LODOP.PRINT_INITA(10, 10, 754, 453, "某某情况");             LODOP.ADD_PRINT_TEXT...
vue项目中如何利用lodop控件实现多页打印
最新发布
hmmmmm的博客
05-07 1015
针对windows环境下的vue项目中如何利用lodop控件实现打印的功能，不支持mac环境 下载安装 首先去lodop官网下载中心下载相关的包，完成安装 重点关注前四个文件，安装第一个文件，在第二个文件和第三个文件中根据电脑系统选一个安装。将第四个文件放在项目的assets文件夹下面。 代码中使用 由于不好控制分页的时候，切纸的位置，于是换了一种方式，代码控制每一页的内容的地方使用LODOP.NewPageA();实现手动分页，这种方式可以保证切纸位置不会跑偏。 //首先引入相关的js import
LODOP打印分页出现空白页
C_AJing的博客
10-18 2406
最近项目中使用lodop控件进行打印操作，由于之前也使用过所以并没有感觉有什么问题，不过在进行超文本打印分页的时候却发现连续出现了空白页，这是我很奇怪，于是第一反应就是给分页错误的超文本内容加上背景色，查看打印范围： LODOP.ADD_PRINT_HTM("15mm", "5mm", "190mm", "263mm", '<style>*{background:#000}</s...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题：编程工作室 设计师：CSDN官方博客 返回首页
评论 2

打赏作者

蠢死的脑细胞

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值