Lodop 官网
Lopdop(读音“劳道谱”，“露肚皮”) ，Web开发的必选伴侣，是全国1000多家软件公司的智慧结晶，诞生10年了，几乎每个功能细节都蕴藏着无数开发者的期待和汗水。目前Lodop家族有C-Lodop和Lodop7两个主流版本，C-Lodop主要担纲Windows下的Web打印服务，它可以像浏览器打印插件一样使用，也可部署成集中打印服务器，给手机和平板打印提供云端；而Lodop7则把Windows下的精彩逐步搬到了Linux(国产化)上，且正向跨平台纵深发展…
使用
下载
从这里下载最新版本，也可以重温历史版本.
安装
下载后解压zip包，得到如下文件夹：
install_lodop32.exe 和 install_lodop64.exe 是安装和升级Lodop控件的主程序，对应32位和64位浏览器（注意浏览器位数不是操作系统位数）。如果将它们复制或改名为uninstall_lodop32.exe(名前加un)就可用其卸载控件。
CLodop_Setup_for_Win32NT.exe：这是web打印服务C-Lodop标准版安装主程序，它是个JS服务(内含Lodop)，适合所有浏览器，可替代前者。
LodopFuncs.js：该文件是个样例(很简单尽量看懂它)，其中的getLodop过程根据浏览器类型检查是否安装、是否最新版本，然后引导用户对应下载执行install_lodopXX.exe文件或CLodop_Setup_for_Win32NT.exe。
简单使用
案例一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html>
<head>
<script src="http://localhost:8000/CLodopFuncs.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<script language="JavaScript" type="text/javascript">
function CreatePrintPage() {
LODOP.PRINT_INIT("套打模版");
LODOP.ADD_PRINT_TEXT(0, 0, 100, 20, "文本内容一");
LODOP.PRINT_DESIGN();
}
</script>
<body>
进入<a href="javascript:;" onclick="javascript:CreatePrintPage();">Lodop打印</a><br><br>
</body>
</html>
|
案例二
print.css：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| @charset "utf-8";
.main {
width: 745px;
height: 480px;
margin: 0px auto;
margin-top: 20px;
padding: 10px;
display: flex;
}
.body {
width: 95%;
height: 480px;
}
.title {
width: 100%;
height: 40px;
display: flex;
}
.title .div1 {
width: 60%;
text-align: right;
}
.title .div1 .divCtn {
width: 230px;
height: 40px;
float: right;
}
.title .div1 .divCtn .titleCtn {
width: 230px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 25px;
font-weight: bold;
}
.title .div1 .divCtn .titleUdeLine {
width: 230px;
height: 6px;
border-bottom: solid 2px #9C5223;
border-top: solid 2px #9C5223;
}
.title .div2 {
width: 40%;
text-align: right;
height: 40px;
line-height: 30px;
font-size: 20px;
font-weight: bold;
}
.date {
width: 100%;
height: 40px;
display: flex;
}
.date .deDiv1 {
width: 60%;
height: 40px;
line-height: 40px;
text-align: right;
font-size: 18px;
}
.date .deDiv2 {
width: 40%;
height: 40px;
line-height: 40px;
text-align: right;
font-size: 18px;
}
.tempTr1 td {
text-align: center;
}
table tr td {
padding: 5px;
}
.tempTr2 td {
height: 40px;
text-align: center;
}
.end {
width: 5%;
height: 480px;
}
|
print.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="http://localhost:8000/CLodopFuncs.js"></script>
<link type="text/css" rel="styleSheet" href="print.css" />
<script language="JavaScript" type="text/javascript">
function CreatePrintPage() {
var csc = "<link rel='styleSheet' href='print.css'>";
var htmlStr = csc + document.getElementById("printContent").innerHTML;
LODOP.PRINT_INIT("套打模版");
LODOP.ADD_PRINT_HTM(15, 15, 680, 1300, htmlStr);
LODOP.PREVIEW()
}
</script>
<body>
进入<a href="javascript:;" onclick="javascript:CreatePrintPage();">Lodop打印</a><br><br>
<div id="printContent" style="display: block;">
<div class="main">
<div class="body">
<div class="title">
<div class="div1">
<div class="divCtn">
<div class="titleCtn">收 据</div>
<div class="titleUdeLine"></div>
</div>
</div>
<div class="div2">NO：<span
style="color: #9C5223;">2396827</span> </div>
</div>
<div class="date">
<div class="deDiv1">
2022年 02月 21日
</div>
<div class="deDiv2">第 200 号</div>
</div>
<table border="1" style="width: 100%; border-collapse: collapse;">
<tr class="tempTr2">
<td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;">
兹 收 到 张三丰</td>
<td colspan="6" style="width: 50%;">
交 来 下 列 款 项 此 据
</td>
</tr>
<tr>
<td align="center" rowspan="2" style="width: 60%;">
摘 要</td>
<td colspan="10" align="center" style="width: 10%;">金 额
</td>
<td rowspan="2" align="center" style="width: 30%;">备 注
</td>
</tr>
<tr class="tempTr1">
<td>￥</td>
<td>百</td>
<td>十</td>
<td>万</td>
<td>千</td>
<td>百</td>
<td>十</td>
<td>元</td>
<td>角</td>
<td>分</td>
</tr>
<tr class="tempTr2">
<td>帝景豪庭1栋一单元1202管理费</td>
<td>￥</td>
<td></td>
<td></td>
<td>2</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>支付：现金</td>
</tr>
<tr class="tempTr2">
<td></td>
<td>￥</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tempTr2">
<td></td>
<td>￥</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tempTr2">
<td colspan="12" style=" text-align: left;">
合计人民币（大写）贰万伍仟肆佰叁拾贰圆贰角叁分
<div style="float: right; display: flex;">
<div style="font-size: 20px;">￥：</div>
<div
style="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;">
25432.23</div>
</div>
</td>
</tr>
</table>
<div style="width: 100%; display: flex; height: 40px;">
<div style="width: 50%; height: 40px; line-height: 40px;">
主管：
</div>
<div style="width: 50%; height: 40px; line-height: 40px;">经手人：</div>
</div>
</div>
<div class="end">
<div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">
第<br />二<br />联<br />：<br />存<br />根</div>
</div>
</div>
</div>
</body>
</html>
|
其他
其他功能务必查看官网文档。这是一个非常强大好用的插件！