打印设计是给开发人员使用的工具,用打印设计辅助开发后,打印设计的界面本身的菜单下,可以生成代码,然后把对应的内容信息补充上,拷贝到自己的页面的JS里或存起来,作为模版使用。
也可以关闭打印设计,可返回设计好的JS代码。这种返回的是全部的JS代码。Lodop获取全部JS代码,传统JS模版的生成、LodopJS文档式模版的加载和赋值、
如果一次没有设计完, 或者设计完后发现有问题,需要修改,还要把代码拷到页面里,然后再反复进行设计。
还有内容出问题的时候,需要删减排查,删减的时候,如果不是一点点删减,逐渐缩小区域。如果由设计网页的人员进行删减排查,可以找到出问题的样式所在区域,如果不是设计该网页的人员,网页往往有加载很多外部链接的css样式,要查哪些样式的位置,就不是很容易,很花时间。
排查非自己的html代码时,可以逐个或逐个区域删除外部css链接,先找到需要排查的样式在哪个外部css样式链接里。
在用打印设计时,可以用反复进行设计,这样不用复制代码到页面JS里去再进行设计。
反复设计模版,也就是把设计的返回值放入文本框,然后再从文本框中加载模版,这样不停的放返回值,不停的加载模版。
可以:1.一次设计不完善,关了之后,再在页面调用设计。
2.排查某段html或css样式,原始代码进入后,删减内容,删减后发现删减错了,直接点击再载入原始代码。发现删减有效果,关闭后,也可以过一会再去删减排查。
调试html和css操作流程:
该页面共有三个按钮,有两个调用的方法都是一样的,都是加载原始的html信息。
1.把需要测试的html信息放入第一个文本框,然后点第一个下面的打印设计,进行初次修改排查。
2.修改一段时间后,想过会在改,关闭打印设计窗口,去干其他事情。这时候修改后的代码会返回到第二个文本框里。
3.干完其他事情后,再点第二个文本框下方的反复打印设计,进入设计,然后再改,如果中途有其他事情,可以重复2,3多次,打印设计里不断修改,再不断预览,中途需要可关闭。
PS:如果中途发现删减的区域包含了问题内容部分,需要更精确的定位问题内容所在位置,可点击加入原始html,就可以再次进入原始html信息,然后把不需要的区域删除,在上次删减区域里,再删减,找到更加细的位置,最后定位到哪些html或样式内容引起的。
测试页面:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WEB打印控件LODOP</title> <script language="javascript" src="LodopFuncs.js"></script> <link href="css/stylecss1.css" type='text/css' rel="stylesheet"> </head> <body id="bodyA1"> <div id="header"> <div id="head1"></div> </div> <div id="testhtmDiv"> 输入需要测试的原始html代码: <p><textarea rows="12" id="S1" cols="107" ></textarea><br> </div> <input type="button" class="btn2" value="原始html代码进入设计" onclick="prn1_design()"> <div id="testhtmDiv"> 修改后的打印设计的返回打印代码: <p><textarea rows="12" id="S2" cols="107" ></textarea><br> </div> <input type="button" class="btn2" value="进入设计反复修改" onclick="TestHtmDes()"><input type="button" class="btn2" value="复原重新原始html代码进入设计" onclick="prn1_design()"> <br><br><br> <div id="footer"><img src="./images/lodopfoot.png"></div> <script language="javascript" type="text/javascript"> var LODOP; //声明为全局变量 function htmlcontent(){ LODOP=getLodop(); LODOP.PRINT_INIT(""); LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("S1").value); }; function TestHtmDes(){ LODOP=getLodop(); eval(document.getElementById('S2').value); if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){document.getElementById('S2').value=Value;}; document.getElementById('S2').value=LODOP.PRINT_DESIGN(); }; function prn1_design() { htmlcontent(); if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){document.getElementById('S2').value=Value;}; document.getElementById('S2').value=LODOP.PRINT_DESIGN(); }; </script> </body>
图示: