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打印表格带页头页尾自动分页每页显示头尾超文本超过打印项高度,会自 ...

随机推荐

LG3690 【模板】Link Cut Tree 和 SDOI2008 洞穴勘测
UPD:更新了写法. [模板]Link Cut Tree 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 后接两个整数(x,y),代表询问从x到y ...
7月新的开始 - Axure学习05 - 元件库的创建
元件库的创建元件库的创建.载入.编辑和删除等操作元件库的后缀名名:.rplib 学习结果: 实现iPhone6的原型图分辨率是 1080*1920,现在我们按比例缩小去实现(360*640)
后端token认证模板
1.创建一个视图 from rest_framework import exceptions from app01 import models from rest_framework.authenti ...
什么是webpack模块化构建工具
百度百科模块化:是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性. 计算机模块化:一般指的是可以被抽象封装的最小/最优代码集合,模块化解决的是功能耦合问题. ...
JavaScript是如何工作的01：引擎，运行时和调用堆栈的概述！
概述几乎每个人都已经听说过 V8 引擎,大多数人都知道 JavaScript 是单线程的,或者它使用的是回调队列. 在本文中,我们将详细介绍这些概念,并解释 JavaScrip 实际如何运行.通过了 ...
动态 DP 总结
目录例题1:模拟赛题代码: 例题2 例题3:带修改树上最大独立集. 代码: 注:部分参考 https://www.luogu.org/blog/gkxx-is-here/what-the-hell ...
学到了武沛齐讲的Day14完
& 交 | 并 ^ 并-交 --------------------- 格式化 %s 字符串,数字,一切 %.4s 留前面4位 %d 数字 %f 小数保留6位四舍五入 %0. ...
通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上
第一步: 编写基础的 html 框架内容,并引入 jquery: <!doctype html> <html lang="en"> <head> ...
a problem
给出两个长度为 $n$ 的数组 $a, b$对于任意的 $a_i + b_j$, 求第 $k$ 大不妨设 $a_i < a_{i + 1}, b_i < b_{i + 1}$ 对于任意的 ...
Poj 2599 Godfather(树的重心)
Godfather Time Limit: 2000MS Memory Limit: 65536K Description Last years Chicago was full of gangste ...

LODOP打印超文本字符串拼接1 固定表格填充数值

LODOP打印超文本字符串拼接1 固定表格填充数值的更多相关文章

随机推荐

热门专题