Lodop中页眉页脚的实现

功能描述：要货单打印功能，可打印多个要货单.。每个要货单有里面都多种商品.，按照不同的的要货单把里面的商品打印出来。

实现方式：首先在在前端页面画出所需要的打印的模板（我用的是vue），用到了组件。需要向组件里面后台接口返回的list。自己需要什么参数返回什么。具体看返回的结构来遍历

<template><div class="app-container calendar-list-container" style="display: none;"><!-- style="display: none;" --><div v-for="(item,index) in dateList" style="padding-top: 50px;"><div :id="printid('content',index)" style="padding-bottom: 100px;"><div style="ling-height: 30px" class=size16 align=center><strong><font size="5">御注文書</font></strong></div><div style="float: right;"><div><span>発注No.</span><span style="padding-left: 15px;">{{item.receiptNo}}</span></div><div><span>発注日</span> <span style="padding-left: 20px;">{{item.createTime | parseTime('{y}-{m}-{d}') }}</span></div><div><span>納<span style="visibility:hidden;">注</span> 期</span><span style="padding-left: 20px;">{{item.createTime | parseTime('{y}-{m}-{d}')}}</span> </div></div><div><div style="width:300px;border-bottom:1px solid #333; display: flex;justify-content: space-between;"><div>{{item.storeName}}</div><div>御中</div></div><div style="width:300px;border-bottom:1px solid #333;display: flex;justify-content: space-between;padding-top: 20px;"><div></div><div>樣</div></div></div><div style="padding-top: 30px;"><div style="width: 50px;height: 50px;float: right;border:1px solid #000;border-left-color: #FFFFFF;"></div><div style="width: 50px;height: 50px;float: right;border:1px solid #000;"></div><div style="float: right; padding-right: 100px;padding-top: 20px;"><span>担当着未設定</span> </div></div></div><div :id="printListid('printlist',index)"><table border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse" bordercolor="#333333"><thead><tr><td width="10%"><div align=center><b>商品コード</b></div></td><td width="25%"><div align=center><b>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</b></div></td><td width="5%"><div align=center><b>倉&nbsp;&nbsp;&nbsp;庫</b></div></td><td width="10%"><div align=center><b>入数.箱数</b></div></td><td width="5%"><div align=center><b>数&nbsp;&nbsp;&nbsp;量</b></div></td><td width="5%"><div align=center><b>単位</b></div></td><td width="10%"><div align=center><b>単&nbsp;&nbsp;&nbsp;価</b></div></td><td width="5%"><div align=center><b>金 額</b></div></td><td width="25%"><div align=center><b>備&nbsp;&nbsp;&nbsp;考</b></div></td></tr></thead><tbody><tr v-for="itemlist in item.list"><td style="text-align: center;">{{itemlist.goodsNo}}</td><td>{{itemlist.goodsName}}</td><td>货架</td><td><div style="float: left;margin-left: 40px;"><span>{{itemlist.goodsEachNum}}</span></div><div style="float: right;"><span>{{itemlist.purchaseBoxnum}}</span></div></td><td style="text-align: right;">{{itemlist.purchaseNum}}</td><td>{{itemlist.goodsUnit}}</td><td style="text-align: right;">{{itemlist.priceRetail | moneyNumFormat}}</td><td style="text-align: right;">{{itemlist.purchaseNum * itemlist.priceRetail | moneyNumFormat}}</td><td>{{itemlist.purchaseRemark}}</td></tr></tbody><tfoot><tr><td colspan="5"></td><td colspan="2" width="14%" align="right"><p align="center"><b>合計</b> </p></td><td  width="10%" tdata="subSum" format="#,##0.00" style="text-align: right;"><font color="#0000FF">###</font></td></tr></tfoot></table></div><div :id="footerid('footer',index)" style="padding-top: 50px;"><div style="float: right;"><div style="line-height:20px;display: flex;" align=left><span style="padding-right: 20px;">摘要</span><div v-if="item.purchaseRemark != '' " style="padding-left: 0px;"><div style="width:300px;border-bottom:1px solid #333;">{{item.purchaseRemark}}</div><div style="width:300px;border-bottom:1px solid #333;padding-top: 25px;"></div><div style="width:300px;border-bottom:1px solid #333;padding-top: 25px;"></div></div><div v-else style="padding-left: 0px;padding-top: 20px;"><div style="width:300px;border-bottom:1px solid #333;"></div><div style="width:300px;border-bottom:1px solid #333;padding-top: 25px;"></div><div style="width:300px;border-bottom:1px solid #333;padding-top: 25px;"></div></div></div></div><div style=" width: 350px;"><div style="line-height:0px;display: flex;" align=left><div><span>納入先</span></div> <div style="padding-left: 34px;width: 220px;" align="right"><span  v-if="item.storeAddress !=''">{{item.storeAddress}}</span><br><span style="font-size: 24px;">{{item.storeName}}</span><br><span v-if="item.storePhone !='' ">TEL/FAX{{item.storePhone}}</span></div></div></div></div></div></div>
</template><script>export default {name: 'ToinvoicePrint',props: {dateList: {type: Array,default: () => []},},data() {return {}},created() {},methods: {printid(type, id) {return type + "_" + id},printListid(type, id) {return type + "_" + id},footerid(type, id) {return type + "_" + id}}}
</script><style scoped="scoped">
</style>

2.页面代码主要分为三个部分：页眉，需要打印的内容，页脚。因为是list所以需要遍历，三个部分的div都有命名不同的动态id。下面lodop打印里面同样需要遍历获取这些个id

createPrint() {var LODOP = getLodop();LODOP.PRINT_INIT("连锁管理--要货单打印");LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "A4");var strStyle = "<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}</style>"for (var i = 0; i < this.dateList.length; i++) {LODOP.ADD_PRINT_TABLE(200, "5%", "90%", 250, strStyle + document.getElementById("printlist_" + i).innerHTML);LODOP.SET_PRINT_STYLEA(0, "Vorient", 3);LODOP.ADD_PRINT_HTM(0, "5%", "90%", "100%", document.getElementById("content_" + i).innerHTML);LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);LODOP.SET_PRINT_STYLEA(0, "LinkedItem", i*3+1);LODOP.ADD_PRINT_HTM(470, "5%", "90%", "100%", document.getElementById("footer_" + i).innerHTML);LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);//“LinkedItem”：设置关联内容项的项目编号//“LinkedItem”的值：整数或字符型，整数代表被关联项的序号，字符型代表被关联项的项目名，内容项与别人关联后，//会紧跟被关联者之后打印，位置和区域大小随被关联项而定，此时其Top和left不再是上边距和左边距，而是与关联项的间隔空隙及左边距偏移。//当两者都是多页内容项时，二者的每页区域一样大。// 2.如果关联者是页眉页脚对象，那么不会每页输出，仅与被关联对象同页输出。此时输出的位置与被关联对象的位置相对固定，//也就是当上边距小于被关联对象的上边距时，那么其起点位置会与被关联者的上边线保持设计时的距离，否LODOP.SET_PRINT_STYLEA(0, "LinkedItem", i*3+1);LODOP.NewPageA();}LODOP.PREVIEW();},

3.这里需要注意可能出现的问题:1.同一个单子分页有页眉页脚。第二个单子以及后面的单子没有页眉页脚。这是应为LODOP.SET_PRINT_STYLEA(0, "LinkedItem", i*3+1);这段代码导致的。关联对象有一个自己序号。

Lodop中页眉页脚的实现相关推荐

LODOP在页面不同位置输出页眉页脚
Lodop中的页眉页脚项的特点是:每页固定位置输出,具体该特点可查看本博客的其他博文:Lodop打印项对象类型属性区分 Lodop中有可以设置打印项次页偏移属性,但是该方法是针对单个打印项自动分页的, ...
LODOP有选择性显示页眉页脚
LODOP.ADD_PRINT_HTM("95%", "20px", "95%", "100%",arrays[1][& ...
计算机一级插入页眉,2017年计算机一级WPS辅导：WPS中页眉页脚的设计技巧
本文讲解WPS2005页眉页脚的编辑技巧.页眉和页脚在正式的文档中起着很大的作用.一方面,它可以使文档页面美观.正规:另一方面,它可以使文档或表格清晰,查阅起来方便,最普通的例子就是形如第X页共Y页这 ...
word文档中页眉页脚的设置问题
问题一:解决只在首页显示页眉与页脚这个问题解释起来其实挺麻烦的,但懂了的话操作起来不难: 对第一个问题: 第一步,将光标放在页和页之间分开的两个字中间,点插入--分隔符--分节符类型--下一页.确定 ...
【vue2】中谷歌 Chrome 实现自定义页眉页脚打印
解决的最终方案如下图需求:页眉页脚如下,设计图所示,使用浏览器Ctrl+P打印即可,大小B5试纸一.实现方法说明:数据内容不确定分页的情况下,建议使用方法二相关属性参考地址:https:// ...
Word中只修改某一页的页眉页脚，其它页的保持不变
参考:只修改某一页页眉页脚问题来源:在用word2013编辑页眉页脚时,所有页的页眉和页脚都同时变化,但现在只需要修改某一页的内容,其它的页不变. **解决方法:**Word 2007.Word 2 ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
如何在pdf文件中编辑页眉页脚
如何在pdf文件中编辑页眉页脚?要对pdf文件进行编辑的话是需要使用专业的pdf编辑软件才能进行的.那pdf文件中的编辑问题和在pdf文件添加页眉页脚应该如何处理呢?下面小编就给大家分享一下方法. 附 ...
excel更改页眉页脚_如何在Excel的页眉和页脚中键入“＆”号
excel更改页眉页脚 Have you tried to type an ampersand (&) in a header or footer in Excel and seen it d ...

Lodop中页眉页脚的实现

Lodop中页眉页脚的实现相关推荐

最新文章

热门文章