Newer
Older
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WEB打印控件LODOP的样例十:控制打印样式</title>
<style id="style1">
table {
border-width: 5px;
border-style: solid;
border-color: #0000FF;
}
</style>
<script language="javascript" src="LodopFuncs.js"></script>
<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
<embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="install_lodop.exe"></embed>
</object>
</head>
<body id="body01">
<h2><font color="#009999">演示如何控制打印样式(STYLE)：</font>
</h2>
<P>在对页面内容直接裁剪输出时，有时候显示样式不一定</P>
<P>适合打印，LODOP可以实现按需要控制打印样式。</P>
<P>下面的表格由页面样式(STYLE)控制加了蓝色粗边框：</P>
<div id="form1">
<form>
<table border="1" width="300">
<tr>
<td width="50%">101</td>
<td width="50%">201</td>
</tr>
<tr>
<td width="50%">102</td>
<td width="50%">202</td>
</tr>
<tr>
<td width="50%">103</td>
<td width="50%">203</td>
</tr>
<tr>
<td width="50%">104</td>
<td width="50%">204</td>
</tr>
</table>
</form>
</div>
<p>1、输出时可与显示样式一致：<a href="javascript:myPreview1()">预览同样式打印1</a></p>
<p>2、可以无样式(缺省表格线)输出：<a href="javascript:myPreview2()">预览无样式打印2</a></p>
<p>3、用另外样式(表格线合并为单一细线)输出：<a href="javascript:myPreview3()">预览细线样式打印3</a></p>
<p>4、打印本页并隐藏一些内容<input type="button" value="预览整页并隐藏本按钮4" onclick="myPreview4()" >，后面内容紧跟上。</p>
<p>5、用外链样式表控制样式：<a href="javascript:myPreview5()">预览打印双线边框5</a></p>
<p>
本例进一步说明控件接收超文本控制，反过来说，你不控制就无动作，自然也包括样式STYLE。</p>
<h3><font size="3"><font color="#009999">本样例关键点：将</font><font size="3" color="#FF00FF">STYLE</font>
<font color="#009999">的内容传给控件。</font></font></h3>
<p><a href="PrintSampIndex.html"><<回样例目录</a></p>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function myPreview1(){
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
var strBodyStyle="<style>"+document.getElementById("style1").innerHTML+"</style>";
var strFormHtml=strBodyStyle+"<body>"+document.getElementById("form1").innerHTML+"</body>";
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_样式风格");
LODOP.ADD_PRINT_TEXT(50,50,260,39,"打印与显示样式一致：");
LODOP.ADD_PRINT_HTM(88,50,300,200,strFormHtml);
LODOP.PREVIEW();
};
function myPreview2(){
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
var strFormHtml=document.getElementById("form1").innerHTML;
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_样式风格");
LODOP.ADD_PRINT_TEXT(50,50,260,39,"无样式打印：");
LODOP.ADD_PRINT_HTM(88,50,300,200,strFormHtml);
LODOP.PREVIEW();
};
function myPreview3(){
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
var strBodyStyle="<style>table { border: 1 solid #000000;border-collapse:collapse }</style>";
var strFormHtml=strBodyStyle+"<body>"+document.getElementById("form1").innerHTML+"</body>";
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_样式风格");
LODOP.ADD_PRINT_TEXT(50,50,260,39,"细线样式打印：");
LODOP.ADD_PRINT_HTM(88,50,300,200,strFormHtml);
LODOP.PREVIEW();
};
function myPreview4(){
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_全页排除按钮");
var strBodyStyle="<style>input {display: none;}</style>";
var strBodyHtml=strBodyStyle+"<body>"+document.getElementById("body01").innerHTML+"</body>";
LODOP.ADD_PRINT_HTM(20,40,700,900,strBodyHtml);
LODOP.PREVIEW();
};
function myPreview5(){
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
var strStyleCSS="<link href='PrintSample10.css' type='text/css' rel='stylesheet'>";
var strFormHtml=strStyleCSS+"<body>"+document.getElementById("form1").innerHTML+"</body>";
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_外链样式风格");
LODOP.ADD_PRINT_TEXT(50,50,260,39,"外链样式双线边框：");
LODOP.ADD_PRINT_HTM(88,50,300,200,strFormHtml);
LODOP.PREVIEW();
};
</script>
</body>
</html>