PrintSample36.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>WEB打印控件LODOP的样例三十六:如何在设计过程中用js编辑内容</title>
  6. <script language="javascript" src="LodopFuncs.js"></script>
  7. <object id="LODOP1" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
  8. <embed id="LODOP_EM1" TYPE="application/x-print-lodop" width=0 height=0 PLUGINSPAGE="install_lodop32.exe"></embed>
  9. </object>
  10. </head>
  11. <body>
  12. <h2><font color="#009999">演示如何在设计过程中用js编辑内容:</font>
  13. </h2>
  14. &nbsp;&nbsp;&nbsp;
  15. 一般当窗口弹出显示时,各种ADD或SET语句就无法继续执行,但如果窗口是内嵌的,则可以执行。<br>
  16. 下面首先打开显示<a href="javascript:DisplayDesign()">打印设计</a>或<a href="javascript:DisplaySetup()">打印维护</a>窗口,然后点击后面的ADD或SET语句,看看追加效果:<br>
  17. <object id="LODOP2" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=810 height=407>
  18. <param name="Caption" value="内嵌显示区域">
  19. <param name="Border" value="1">
  20. <param name="Color" value="#C0C0C0">
  21. <embed id="LODOP_EM2" TYPE="application/x-print-lodop" width=810 height=407 PLUGINSPAGE="install_lodop.exe">
  22. </object>
  23. <br>
  24. <a href="javascript:;" onclick="javascript:LODOP.ADD_PRINT_TEXTA('a',9,262,175,30,'后加的Text内容,类名为a');">ADD_PRINT_TEXTA</a>或
  25. <a href="javascript:;" onclick="javascript:LODOP.ADD_PRINT_LINE(120,33,60,133,0,1);">ADD_PRINT_LINE</a>或
  26. <a href="javascript:;" onclick="javascript:LODOP.ADD_PRINT_RECT(141,44,100,60,0,1);">ADD_PRINT_RECT</a>或
  27. <a href="javascript:;" onclick="javascript:LODOP.ADD_PRINT_ELLIPSE(235,45,100,60,0,1);">ADD_PRINT_ELLIPSE</a><br>或
  28. <a href="javascript:;" onclick="javascript:LODOP.ADD_PRINT_BARCODE(87,258,100,60,'Code39','123456789012');">ADD_PRINT_BARCODE</a>或
  29. <a href="javascript:;" onclick="javascript:LODOP.ADD_PRINT_CHART(128,242,497,198,'5','');">ADD_PRINT_CHART</a>或
  30. <a href="javascript:;" onclick="javascript:Addhtm();">ADD_PRINT_HTM</a><br>或
  31. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA(2,'FontSize',15);">SET第2项的字体为15</a>或
  32. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA(1,'Top','30mm');">SET第1项的Top为30mm</a>或
  33. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA(1,'Left','++5mm');">SET第1项Left偏移++5mm</a>(可连续点击)<br>或
  34. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('PRINT_INIT','Top','10mm');">SET整体Top为10mm</a>或
  35. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('PRINT_INIT','Left','++5mm');">SET整体Left偏移++5mm</a><br>或
  36. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA(2,'Deleted',true);">删除第2项</a>或
  37. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('Selected','Deleted',true);">删除所选内容项</a>或
  38. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('unSelected','Deleted',true);">删除未选内容项</a>或
  39. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('All','Deleted',true);">删除全部内容项</a><br>或
  40. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('First','Deleted',true);">删除第一内容项</a>或
  41. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('Last','Deleted',true);">删除末尾内容项</a>或
  42. <a href="javascript:;" onclick="javascript:LODOP.SET_PRINT_STYLEA('a','Deleted',true);">删除类名为“a”的内容项</a><br>或
  43. <a href="javascript:;" onclick="javascript:SetBKIMG()">设置背景图</a><br>
  44. 或选项:<input type="checkbox" name="SendMan" value="发货人" onclick="Moditify(this)">发货人
  45. <br><br>
  46. <a href="javascript:;" onclick="javascript:getProgram();">1:获得全部程序代码:</a><br>
  47. <textarea rows="6" id="S1" cols="107" >返回的结果值</textarea><br>
  48. <input type="button" value="用这些代码执行打印预览" id="button01" style="display:none" onclick="prn_Preview()">
  49. <p>2:获得所有打印项的
  50. <input type="button" value="有效个数:" onclick="javascript:getMyValue('ItemCount',document.getElementById('T1'))">
  51. <input type="text" id="T1" size="20">
  52. <input type="button" value="历史个数:" onclick="javascript:getMyValue('ItemCountHS',document.getElementById('T1HS'))">
  53. <input type="text" id="T1HS" size="20">
  54. </p>
  55. <p>3:获得第<input type="text" id="T2" size="2" value="1">个打印项的
  56. <select size="1" id="Select01">
  57. <option value="ItemTop">上边距</option>
  58. <option value="ItemLeft">左边距</option>
  59. <option value="ItemWidth">宽度</option>
  60. <option value="ItemHeight">高度</option>
  61. <option value="ItemContent">内容</option>
  62. <option value="ItemClass">对象类别</option>
  63. <option value="ItemClassName">对象类别名</option>
  64. <option value="ItemPageType">对象类型</option>
  65. <option value="ItemName">对象类名</option>
  66. <option value="ItemNameID">对象识别序号</option>
  67. <option value="ItemIndex">对象物理序号</option>
  68. <option value="ItemFontName">字体名称</option>
  69. <option value="ItemFontSize">字体大小</option>
  70. <option value="ItemColor">字体颜色</option>
  71. <option value="ItemAlign">靠齐方式</option>
  72. <option value="Itembold">是否粗体</option>
  73. <option value="ItemItalic">是否斜体</option>
  74. <option value="ItemUnderline">是否下划线</option>
  75. <option value="ItemSelected">是否被选择</option>
  76. <option value="ItemPenWidth">线条宽度</option>
  77. <option value="ItemPenStyle">线条类型</option>
  78. <option value="ItemHorient">左右位置</option>
  79. <option value="ItemVorient">上下位置</option>
  80. <option value="ItemAngle">旋转角度</option>
  81. <option value="ItemStretch">图片缩放模式</option>
  82. <option value="ItemReadOnly">打印维护内容只读</option>
  83. <option value="ItemPreviewOnly">是否仅预览</option>
  84. <option value="ItemPageIndex">目标输出页</option>
  85. <option value="ItemNumberStartPage">页号起始页</option>
  86. <option value="ItemStartNumberValue">页号起始值</option>
  87. <option value="ItemLineSpacing">行间距</option>
  88. <option value="ItemLetterSpacing">字间距</option>
  89. <option value="ItemGroundColor">背景色</option>
  90. <option value="ItemShowBarText">显示条码文字</option>
  91. <option value="ItemQRCodeVersion">QRCode版本号</option>
  92. <option value="ItemTextFrame">边框类型</option>
  93. <option value="ItemSpacePatch">文本尾是否补空格</option>
  94. <option value="ItemAlignJustify">文本两端是否靠齐</option>
  95. <option value="ItemTranscolor">图片透明背景色</option>
  96. <option value="ItemTop2Offset">次页上边距偏移</option>
  97. <option value="ItemLeft2Offset">次页左边距偏移</option>
  98. <option value="ItemTableHeightScope">表格高是否含头脚</option>
  99. <option value="ItemLinkedItem">关联对象(类名或识别序号)</option>
  100. <option value="ItemHtmWaitMilSecs">HTM下载附加延迟毫秒数</option>
  101. </select>
  102. <input type="button" value="值:" onclick="document.getElementById('S2').value=
  103. LODOP.GET_VALUE(document.getElementById('Select01').value,document.getElementById('T2').value)">
  104. 或当前“已选”对象的这些<input type="button" value="值:" onclick="document.getElementById('S2').value=
  105. LODOP.GET_VALUE(document.getElementById('Select01').value,'selected')">
  106. <br><textarea rows="4" id="S2" cols="107" ></textarea>
  107. </p>
  108. <p>4:把第<input type="text" id="T3" size="2" value="1">个打印项的内容
  109. <input type="button" value="设置" onclick="LODOP.SET_PRINT_STYLEA(document.getElementById('T3').value,'Content',document.getElementById('S3').value)">
  110. 为如下:
  111. <br><textarea rows="3" id="S3" cols="107" >重新设置的内容</textarea>
  112. </p>
  113. <p>5:获得所设背景图地址的
  114. <input type="button" value="内容:" onclick="javascript:getMyValue('BKIMG_Content',document.getElementById('T5'))">
  115. <input type="text" id="T5" size="73">
  116. </p>
  117. <p>6:获得打印初始化设置的
  118. <input type="button" value="整体上边距:" onclick="javascript:getMyValue('printInitTop',document.getElementById('T6'))">
  119. <input type="text" id="T6" size="65">
  120. </p>
  121. <p>7:获得打印初始化设置的
  122. <input type="button" value="整体左边距:" onclick="javascript:getMyValue('PrintInitLeft',document.getElementById('T7'))">
  123. <input type="text" id="T7" size="65">
  124. </p>
  125. <p>8:获得打印初始化设置的
  126. <input type="button" value="编辑区宽度:" onclick="javascript:getMyValue('PrintInitWidth',document.getElementById('T8'))">
  127. <input type="text" id="T8" size="65">
  128. </p>
  129. <p>9:获得打印初始化设置的
  130. <input type="button" value="编辑区高度:" onclick="javascript:getMyValue('PrintInitHeight',document.getElementById('T9'))">
  131. <input type="text" id="T9" size="65">
  132. </p>
  133. <p>10:获得打印初始化设置的
  134. <input type="button" value="打印任务名:" onclick="javascript:getMyValue('PrintTaskName',document.getElementById('T10'))">
  135. <input type="text" id="T10" size="64">
  136. </p>
  137. <p>11:获得当前内容被
  138. <input type="button" value="打印的次数:" onclick="javascript:getMyValue('PrintedTimes',document.getElementById('T11'))">
  139. <input type="text" id="T11" size="71">
  140. </p>
  141. <p>12:获得所设背景图的
  142. <input type="button" value="X坐标(px):" onclick="javascript:getMyValue('BKIMG_LEFT',document.getElementById('T12'))">
  143. <input type="text" id="T12" size="69">
  144. </p>
  145. <p>13:获得所设背景图的
  146. <input type="button" value="Y坐标(px):" onclick="javascript:getMyValue('BKIMG_TOP',document.getElementById('T13'))">
  147. <input type="text" id="T13" size="69">
  148. </p>
  149. <p>14:获得所设背景图的
  150. <input type="button" value="宽度(px):" onclick="javascript:getMyValue('BKIMG_WIDTH',document.getElementById('T14'))">
  151. <input type="text" id="T14" size="71">
  152. </p>
  153. <p>15:获得所设背景图的
  154. <input type="button" value="高度(px):" onclick="javascript:getMyValue('BKIMG_HEIGHT',document.getElementById('T15'))">
  155. <input type="text" id="T15" size="71">
  156. </p>
  157. <p>16:获得编辑界面原点坐标(相对于object)
  158. <input type="button" value="X坐标(px):" onclick="javascript:getMyValue('DesignInterfaceBaseX',document.getElementById('T16'))">
  159. <input type="text" id="T16" size="41">
  160. </p>
  161. <p>17:获得编辑界面原点坐标(相对于object)
  162. <input type="button" value="Y坐标(px):" onclick="javascript:getMyValue('DesignInterfaceBaseY',document.getElementById('T17'))">
  163. <input type="text" id="T17" size="41"><a href="http://www.lodop.net/uploads/file/sample/extsamples/drop_lodop/PrintSample36-01.html" target="_blank">&gt;&gt;原点坐标的实战例子</a>
  164. </p>
  165. <script language="javascript" type="text/javascript">
  166. var LODOP; //声明为全局变量
  167. function Moditify(item){
  168. LODOP=getLodop(document.getElementById('LODOP2'),document.getElementById('LODOP_EM2'));
  169. if ((!LODOP.GET_VALUE("ItemIsAdded",item.name))&&(item.checked)){
  170. LODOP.ADD_PRINT_TEXTA(item.name,56,32,175,30,item.value); } else {
  171. LODOP.SET_PRINT_STYLEA(item.name,'Deleted',!item.checked);}
  172. }
  173. function CreatePage(){
  174. LODOP=getLodop(document.getElementById('LODOP2'),document.getElementById('LODOP_EM2'));
  175. LODOP.PRINT_INITA(0,0,760,321,"打印控件功能演示_Lodop功能_在线编辑获得程序代码");
  176. LODOP.ADD_PRINT_TEXT(10,50,175,30,"先加的内容");
  177. };
  178. function DisplayDesign() {
  179. CreatePage();
  180. LODOP.SET_SHOW_MODE("DESIGN_IN_BROWSE",1);
  181. LODOP.SET_SHOW_MODE("SETUP_ENABLESS","11111111000000");//隐藏关闭(叉)按钮
  182. LODOP.SET_SHOW_MODE("HIDE_GROUND_LOCK",true);//隐藏纸钉按钮
  183. LODOP.PRINT_DESIGN();
  184. };
  185. function DisplaySetup() {
  186. CreatePage();
  187. LODOP.SET_SHOW_MODE("SETUP_IN_BROWSE",1);
  188. LODOP.SET_SHOW_MODE("MESSAGE_NOSET_PROPERTY",'不能设置属性,请用打印设计(本提示可修改)!');
  189. LODOP.PRINT_SETUP();
  190. };
  191. function Addhtm() {
  192. LODOP.ADD_PRINT_HTM(45,494,288,88,"<table border='1'>\n<tr>\n<td>表格11</td>\n<td>表格12</td>\n<td>表格13</td>\n</tr>\n<tr>\n<td>表格21</td>\n<td>表格22</td>\n<td>表格23</td>\n</tr>\n</table>");
  193. };
  194. function SetBKIMG() {
  195. LODOP=getLodop(document.getElementById('LODOP2'),document.getElementById('LODOP_EM2'));
  196. LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='http://s1.sinaimg.cn/middle/721e77e5t99431b026bd0&690'>");
  197. };
  198. function getProgram() {
  199. LODOP=getLodop(document.getElementById('LODOP2'),document.getElementById('LODOP_EM2'));
  200. if (LODOP.CVERSION) LODOP.On_Return=function(TaskID,Value){document.getElementById('S1').value=Value;};
  201. document.getElementById('S1').value=LODOP.GET_VALUE("ProgramCodes",0);
  202. document.getElementById('button01').style.display="";
  203. };
  204. function prn_Preview() {
  205. LODOP=getLodop(document.getElementById('LODOP1'),document.getElementById('LODOP_EM1'));
  206. eval(document.getElementById('S1').value);
  207. LODOP.PREVIEW();
  208. LODOP=getLodop(document.getElementById('LODOP2'),document.getElementById('LODOP_EM2'));
  209. };
  210. function getMyValue(strType,oResultOB){
  211. var LODOP=getLodop(document.getElementById('LODOP_X'),document.getElementById('LODOP_EM'));
  212. if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){if (oResultOB) oResultOB.value=Value;};
  213. var stResult=LODOP.GET_VALUE(strType,"0");
  214. if (!LODOP.CVERSION) oResultOB.value=stResult;
  215. };
  216. </script>
  217. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a></p>
  218. </body>
  219. </html>