Lodop中页眉页脚的实现

最新推荐文章于 2024-09-19 15:25:36 发布

黑色Knight玫瑰

最新推荐文章于 2024-09-19 15:25:36 发布

阅读量2.7k

点赞数 1

分类专栏： Lodop打印文章标签： Lodop打印页眉页脚实现

本文链接：https://blog.csdn.net/qq_36902889/article/details/89350947

版权

本文介绍了如何利用Lodop在前端页面（使用Vue）中实现要货单的打印功能，包括页眉、页脚的设置。通过向组件传入后台接口返回的商品列表，根据数据结构进行遍历渲染模板。在实际操作中，要注意避免因LODOP的关联对象序号设置导致的页眉页脚重复问题。

摘要由CSDN通过智能技术生成

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

实现方式：首先在在前端页面画出所需要的打印的模板（我用的是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&#