LODOP打印超文本字符串拼接1 固定表格填充数值
前面的博文:Lodop打印控件传入css样式、看是否传入正确样式、Lodop打印如何隐藏table某一列,Lodop传入的样式可以不是页面本身的css样式,传入什么打印什么,此外,数据也是,超文本打印项的参数就是个字符串,可以拼接成各种内容,不一定是页面的样式或数据。
拼接字符串,就是普通的字符串拼接,也就是用+号把字符串变量等拼接成一个大的字符串,然后传给Lodop。
lodop中的没有超文本表格写好模版,然后自动填入表格单元格的功能,但是用JS的字符串拼接,可以自己写代码实现各种功能,也就是自己组织数据,后台数据库等传来的数据,或者用户输入的数据等,数据来源不限,最后组织成合适的超文本进行打印。
字符串拼接,在很多计算语言里是一样的,JS里也是用+加号连接,拼接字符串和变量。LODOP中传入什么打印什么,只要最后拼接出的是自己需要的就可以,Lodop没有用html设计表格,然后用占位符填充值的那种功能,但是用JS本身的字符串拼接是可以实现的,打印项参数的本质就是一些字符串(也有整数如顶边距等整数有缺省单位)。值的来源可以是后台也可以是其他什么地方的字符串。
测试代码:代码中的HtmString就是拼接好的字符串,这里为了清晰,把拼接的各种字符串拆开了,首先是css样式是个字符串,每个数值变量是个字符串,最后和表格主体和内容变量拼接成一个table表格的字符串,加上前面的样式字符串,就拼接出了需要的html字符串。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
<style>
table{border-collapse:collapse;width:120mm;height:100mm;}
.td1{width:25mm;height:100mm;background-color:#bdece8;}td{width:25mm;height:50mm;background-color:#ecbde8;}
</style>
</head>
<body>
表格样式效果:
<div id="div1">
<table border=1>
<tr>
<td rowspan="2" class="td1">名称数量价格</td>
<td>名称1</td>
<td>数量1</td>
<td>价格1</td>
</tr>
<tr>
<td>名称2</td>
<td>数量2</td>
<td>价格2</td>
</tr>
</table>
</div>
输入名称1<input type="text" id="T1"><br>
输入数量1<input type="text" id="T2"><br>
输入价格1<input type="text" id="T3"><br> 输入名称2<input type="text" id="T4"><br>
输入数量2<input type="text" id="T5"><br>
输入价格2<input type="text" id="T6"><br> <a href="javascript:prn1_preview()">预览模版表格</a><br>
<a href="javascript:prn2_preview()">预览填值生成的表格</a><br> <script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prn1_preview() {//传入html内容
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.SET_PRINT_PAGESIZE(1,1200,1020,"");//纸张宽120mm,高102mm
var strStyle="<head><style>table{border-collapse:collapse;width:120mm;height:100mm;}.td1{width:25mm;height:100mm;background-color:#bdece8;}td{width:25mm;height:50mm;background-color:#ecbde8;}</style></head>";
var strbody="<body><div id='div1'><table border=1><tr> <td rowspan='2' class='td1'>名称数量价格</td> <td>名称1</td> <td>数量1</td> <td>价格1</td> </tr><tr><td>名称2</td> <td>数量2</td> <td>价格2</td> </tr></table></div></body>";
var HtmString=strStyle+strbody;
LODOP.ADD_PRINT_HTM(0,0,"100%","100%",HtmString);
LODOP.PREVIEW();
};
function prn2_preview() {//传入html内容带变量拼接字符串
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.SET_PRINT_PAGESIZE(1,1200,1020,"");//纸张宽120mm,高102mm
var n1=document.getElementById("T1").value;
var n2=document.getElementById("T2").value;
var n3=document.getElementById("T3").value;
var na=document.getElementById("T4").value;
var nb=document.getElementById("T5").value;
var nc=document.getElementById("T6").value;
var strStyle="<head><style>table{border-collapse:collapse;width:120mm;height:100mm;}.td1{width:25mm;height:100mm;background-color:#bdece8;}td{width:25mm;height:50mm;background-color:#ecbde8;}</style></head>";
var strbody="<body><div id='div1'><table border=1><tr> <td rowspan='2' class='td1'>名称数量价格</td><td>"+n1+"</td> <td>"+n2+"</td> <td>"+n3+"</td> </tr><tr><td>"+na+"</td> <td>"+nb+"</td> <td>"+nc+"</td> </tr></table></div></body>";
var HtmString=strStyle+strbody;
LODOP.ADD_PRINT_HTM(0,0,"100%","100%",HtmString);
LODOP.PREVIEW();
};
</script>
</body>
图示:如图,第二个表格里的数据,就是通过变量传入的,本质就是普通的字符串拼接。
只要自己组织好对应的html数据,拼接成合适的字符串,传入就可以了,至于数据来源和组织方法可以由自己决定。

LODOP打印超文本字符串拼接1 固定表格填充数值的更多相关文章
- LODOP打印超文本字符串拼接2 单选选择css样式表格
之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...
- LODOP打印超文本有边距不居中的情况2
之前的博文:LODOP打印项水平居中.之前的博文有介绍超文本和纯文本的居中方式,设置超文本打印项居中时,注意打印内容要在打印项本身宽度里居中.之前的博文超文本用的是个表格,而且表格本身没有margin ...
- LODOP打印超文本保留背景色带平铺水印
前面的博文:LODOP中设置设置图片平铺水印,超文本透明. 介绍过 ,如果不想去掉超文本的背景色,想在超文本背景色和超文本内容文字之间加上水印,让水印在背景色上面,文字下面,是不行的,因为平铺的图片和 ...
- LODOP打印超文本中部分文字消失的一种情况1
如果有两对空span,第一对里面是空格,第二对里面是文字,在这两对span标签之间的文字会消失. <span> </span>文字<span>文字</span ...
- Lodop打印如何隐藏table某一列
Lodop打印超文本,既可以打印页面上存在的某些部分,也可以自己组织超文本和css样式传入,有些需要打印的页面表格里,会有一列有编辑删除等按钮,用于对于数据库数据的操作,在打印的时候,这一列由于不属于 ...
- LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...
- LODOP打印表格错位的几种情况
在网页设计中,表格经常用到百分比,表格在浏览器中展示,这个百分比是相对于浏览器的.还有div,各种浮动之类的相对位置,也有的用到百分比.而在LODOP打印中,百分比是相对于纸张的.LODOP中打印项的 ...
- Lodop打印表格带页头页尾 自动分页每页显示头尾
Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
随机推荐
- win10 注册DLL
昨天用c++写了一个ocx插件,注册就死活注册不上,折腾了半天1.打开C:\Windows\SysWOW64 文件夹 找到cmd 右键管理员运行 2.将你的插件或者dll放到此目录下3.regsvr ...
- collection,random,os,sys,序列化模块
一.collection 模块 python拥有一些内置的数据类型,比如 str,list.tuple.dict.set等 collection模块在这些内置的数据类型的基础上,提供了额外的数据类型: ...
- 2019-2020-1 20199312《Linux内核原理与分析》第二周作业
c语言代码 // main.c int g(int x) { return x + 4; } int f(int x) { return g(x); } int main(void) { return ...
- sysobjects统计数据库的各类结构数据
概要: 查询表.以及表中的行数 SELECT a.name,b.rows FROM sysobjects a INNER JOIN sysindexes b ON a.id=b.id WHERE a. ...
- element ui table的所有属性
1. table 的props: data: { type: Array, default: function() { return []; } }, size: String, width: [St ...
- Codeforces Round #459 (Div. 2) C题【思维好题--括号匹配问题】
题意:给出一个串,只包含 ( ? ) 三种符号,求出有多少个子串是完美匹配的. ( ) ? ) => ( ) ( ) 完美匹配( ( ) ? => ( ( ) )完美匹配? ? ? ? = ...
- dubbo-本地直连
一.背景 目前项目是基于dubbo做为rpc,zk为注册中心实现多个微服务之间的远程服务调用.但需要本地联调dubbo接口时,需要绕过注册中心,达到不干扰线上服务,即只订阅不注册服务的目的. 二.实现 ...
- How to Fix a Frozen Mac When Updating macOS
How to Fix a Frozen Mac When Updating macOS By Mike Tee – Posted on Sep 1, 2019 in Mac While macOS ...
- 010_Python3 字典
字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示: d ...
- 【.Net设计模式系列】工作单元(Unit Of Work)模式 ( 二 )
回顾 在上一篇博客[.Net设计模式系列]仓储(Repository)模式 ( 一 ) 中,通过各位兄台的评论中,可以看出在设计上还有很多的问题,在这里特别感谢 @横竖都溢 @ 浮云飞梦 2位兄台对博 ...