dingcong
/
everlight.eap


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP的样例二十二:构建自己的纯WEB打印预览</title>

<script language="javascript" src="LodopFuncs.js"></script>
</head>
<body>
<h2><font color="#009999">演示构建自己的纯WEB打印预览：</font></h2>

<div id="splist" style="OVERFLOW-Y: scroll; WIDTH: 100%; POSITION: HEIGHT: 200px">
  <table class="tableframe2" style="WORD-BREAK: break-all" width="97%" align="center" height="87">
    <tbody>
      <tr id="id1" style="BACKGROUND-COLOR: #dae2ed">
        <td  align="center" width="15%" height="21" bgcolor="#C0C0C0">
          <p align="center"><b>商品编号</b></p>
        </td>
        <td  align="center" width="31%" bgcolor="#C0C0C0" height="21"><b>商品名称</b></td>
        <td  align="center" width="14%" bgcolor="#C0C0C0" height="21"><b>数量</b></td>
        <td  align="center" width="15%" bgcolor="#C0C0C0" height="21"><b>单价(元)</b></td>
      </tr>
      <tr    style="BACKGROUND-COLOR: #dae2ed">
        <td   width="15%" height="11"><input type="text" id="BH1" value="001" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td> 
        <td  align="center" width="31%" height="11"><input type="text" id="MC1" value="商品A" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
        <td  align="center" width="14%" height="11"><input type="text" id="SL1" value="10.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
        <td  align="center" width="15%" height="11"><input type="text" id="DJ1" value="500.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
      </tr>
      <tr style="BACKGROUND-COLOR: #dae2ed">
        <td   width="15%" height="1"><input type="text" id="BH2" value="002" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td> 
        <td  align="center" width="31%" height="1"><input type="text" id="MC2" value="商品B" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
        <td  align="center" width="14%" height="1"><input type="text" id="SL2" value="15.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
        <td  align="center" width="15%" height="1"><input type="text" id="DJ2" value="20.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
      </tr>  
      <tr style="BACKGROUND-COLOR: #dae2ed">
        <td   width="15%" height="1"><input type="text"    id="BH3" value="003" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td> 
        <td  align="center" width="31%" height="1"><input type="text"  id="MC3" value="商品C" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
        <td  align="center" width="14%" height="1"><input type="text"  id="SL3" value="6.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
        <td  align="center" width="15%" height="1"><input type="text"  id="DJ3" value="400.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
      </tr>        
    </tbody>
  </table>
</div>
<p>下面结合样例十六和十九的功能，设计出自己的预览界面（打印上面的商品卡片）：  
</p>
<table border="1" width="100%">
  <tr>
    <td width="6%" align="center"><a href="javascript:myAction1()">适高显示</a></td>
    <td width="6%" align="center"><a href="javascript:myAction2()">正常显示</a></td>
    <td width="6%" align="center"><a href="javascript:myAction3()">适宽显示</a></td>
    <td width="6%" align="center"><a href="javascript:myAction4()">拉近显示+</a></td>
    <td width="6%" align="center"><a href="javascript:myAction5()">推远显示-</a></td>
    <td width="6%" align="center">缩放打印
	<select size="1" id="percent" onchange="myAction6()">
    	   <option value="0">30%</option>
	   <option value="1">50%</option>
    	   <option value="2">60%</option>
	   <option value="3">70%</option>
    	   <option value="4">80%</option>
	   <option value="5">85%</option>
    	   <option value="6">90%</option>
	   <option value="7">95%</option>
    	   <option value="8">100%</option>
	   <option value="9">125%</option>
	   <option value="10">150%</option>
    	   <option value="11">200%</option>
	   <option value="12">按整宽</option>
    	   <option value="13">按整高</option>
	   <option value="14" selected>按整页</option>
	   <option value="15">整宽不变形</option>
	   <option value="16">整高不变形</option>
	   <option value="17">其它比例</option>
	</select>
    </td>
    <td width="5%" align="center"><a href="javascript:myAction7()">首页</a></td>
    <td width="6%" align="center"><a href="javascript:myAction8()">上一页</a></td>
    <td width="6%" align="center"><a href="javascript:myAction9()">下一页</a></td>
    <td width="5%" align="center"><a href="javascript:myAction10()">尾页</a></td>
    <td width="6%" align="center">到:<input size=1 id="inputpage" value="1" oninput="myAction11()" onpropertychange="myAction11()"></input>页</td>
    <td width="7%" align="center"><a href="javascript:myAction12()">打印设置</a></td>
    <td width="7%" align="center"><a href="javascript:myAction13()">打印全部</a></td>
    <td width="7%" align="center"><a href="javascript:myAction14()">打印本页</a></td>
    <td width="9%" align="center"><a href="javascript:myAction15()">旋转(横打时)</a></td>
    <td width="9%" align="center"><a href="javascript:myAction16()">关闭</a></td>
  </tr>
  <tr>
    <td width="100%" colspan="16"> 
	<object id="LODOP_X" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=100% height=500> 
	        <param name="Color" value="#ADD8E6"> 
		<embed id="LODOP_EM" TYPE="application/x-print-lodop" width=100% height=500 color="#ADD8E6"  PLUGINSPAGE="install_lodop32.exe"></embed>
	</object> 
    </td>
  </tr>
</table>
说实在的，我以上设计的预览界面很是一般，但你可以发挥超文本优势，构建出与众不同的预览界面。下面这些数据或许有用：
<p> 
<input type="button" value="获得纸张宽度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_PAGE_WIDTH',document.getElementById('S1'))">     
  <input type="text" id="S1" size="20">         
</p>
<p> 
<input type="button" value="获得纸张高度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_PAGE_HEIGHT',document.getElementById('S2'))">     
  <input type="text" id="S2" size="20">         
</p>
<p> 
<input type="button" value="可打印宽度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_SIZE_WIDTH',document.getElementById('S3'))">     
  <input type="text" id="S3" size="20">         
</p>
<p> 
<input type="button" value="可打印高度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_SIZE_HEIGHT',document.getElementById('S4'))">     
  <input type="text" id="S4" size="20">         
</p>
<p> 
<input type="button" value="不可打上边距(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_TOPMARGIN',document.getElementById('S5'))">     
  <input type="text" id="S5" size="20">         
</p>
<p> 
<input type="button" value="不可打左边距(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_LEFTMARGIN',document.getElementById('S6'))">     
  <input type="text" id="S6" size="20">         
</p>
<p> 
<input type="button" value="纸张(表单)名:" onclick="javascript:getMyValue('PRINTSETUP_PAGESIZE_NAME',document.getElementById('S7'))">     
  <input type="text" id="S7" size="20"></input>   
</p>
<p> 
<input type="button" value="所选打印机序号:" onclick="javascript:getMyValue('PRINTSETUP_PRINTER_INDEX',document.getElementById('U1'))">     
  <input type="text" id="U1" size="20"></input>
</p>
<p> 
<input type="button" value="所选打印机名:" onclick="javascript:getMyValue('PRINTSETUP_PRINTER_NAME',document.getElementById('S8'))">     
  <input type="text" id="S8" size="50"></input>
</p>
<p> 
<input type="button" value="打印方向:" onclick="javascript:getMyValue('PRINTSETUP_ORIENT',document.getElementById('S9'))">     
  <input type="text" id="S9" size="5"></input>0:纵向打印   1:横向打印
</p>
<p> 
<input type="button" value="已打印的次数:" onclick="javascript:getMyValue('PRINTED_TIMES',document.getElementById('T1'))">     
  <input type="text" id="T1" size="6"></input>      
</p>
<p> 
<input type="button" value="设置每次打印的份数:" onclick="javascript:getMyValue('PRINTSETUP_COPIES',document.getElementById('S10'))">     
  <input type="text" id="S10" size="5"></input>   
</p> 
<p>  
<input type="button" value="每份的总页数:" onclick="javascript:getMyValue('PRINTSETUP_PAGE_COUNT',document.getElementById('S11'))">     
  <input type="text" id="S11" size="20">（执行打印或预览指令后才正确）         
</p>
<p> 
<input type="button" value="起始页号:" onclick="javascript:getMyValue('PRINTSETUP_FIRST_PAGE',document.getElementById('S12'))">     
  <input type="text" id="S12" size="5"></input> （执行打印或预览指令后才正确）   
</p>
<p> 
<input type="button" value="结束页号:" onclick="javascript:getMyValue('PRINTSETUP_LAST_PAGE',document.getElementById('S13'))">     
  <input type="text" id="S13" size="5"></input> （执行打印或预览指令后才正确）   
</p>
<p> 
<input type="button" value="缩放打印的比例:" onclick="javascript:getMyValue('PRINTSETUP_PERCENT',document.getElementById('S14'))">     
  <input type="text" id="S14" size="5"></input><br>  
0:30% 1:50% 2:60% 3:70% 4:80% 5:85% 6:90% 7:95% 8:100% 9:125% 10:150% 11:200% 12:按整宽 13:按整高 14:按整页 15:整宽不变形 16:整高不变形 17:自定比例        
</p>
<p> 
<input type="button" value="当前页号（预览时才能读）:" onclick="javascript:getMyValue('PREVIEW_PAGE_NUMBER',document.getElementById('Y1'))">     
  <input type="text" id="Y1" size="20">         
</p>
<p> 
<input type="button" value="缩放显示的比例（预览时才能读）:" onclick="javascript:getMyValue('PREVIEW_ZOOM_STATE',document.getElementById('Y2'))">     
  <input type="text" id="Y2" size="5"></input>
0:适高  1:适宽  2:缩25%  3:缩50%  4:缩75%  5:正常  6:放150%  7:放200%  8:放300%  9:放500%     
</p>
<p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a>
</p>
<script language="javascript" type="text/javascript"> 
	var LODOP; //声明为全局变量
	var blPreviewOpen=false;
	function myAction1(){	
		if (!blPreviewOpen) OpenPreview();		
		LODOP.DO_ACTION("PREVIEW_ZOOM_HIGHT",0);	
	};
	function myAction2(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_ZOOM_NORMAL",0);	
	};
	function myAction3(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_ZOOM_WIDTH",0);	
	};
	function myAction4(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_ZOOM_IN",0);	
	};
	function myAction5(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_ZOOM_OUT",0);	
	};
	function myAction6(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_PERCENT",document.getElementById('percent').value);	
	};
	function myAction7(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_GOFIRST",0);	
	};
	function myAction8(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_GOPRIOR",0);	
	};
	function myAction9(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_GONEXT",0);	
	};
	function myAction10(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_GOLAST",0);	
	};
	function myAction11(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_GOTO",document.getElementById('inputpage').value);//PREVIEW_GOSKIP	
	};
	function myAction12(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_SETUP",0);
	};
	function myAction13(){	
		if (!blPreviewOpen) OpenPreview();
		var iPageCount=LODOP.GET_VALUE("PREVIEW_PAGE_COUNT",0);//获得页数
		LODOP.SET_PRINT_MODE("PRINT_START_PAGE",1);
		LODOP.SET_PRINT_MODE("PRINT_END_PAGE",iPageCount);	
		LODOP.DO_ACTION("PREVIEW_PRINT",0);	
	};
	function myAction14(){	
		if (!blPreviewOpen) OpenPreview();
		var iThisNumber=LODOP.GET_VALUE("PREVIEW_PAGE_NUMBER",0);//获得当前页号
		LODOP.SET_PRINT_MODE("PRINT_START_PAGE",iThisNumber);
		LODOP.SET_PRINT_MODE("PRINT_END_PAGE",iThisNumber);	
		LODOP.DO_ACTION("PREVIEW_PRINT",0);	
	};
	function myAction15(){	
		if (!blPreviewOpen) OpenPreview();	
		LODOP.DO_ACTION("PREVIEW_ROTATE",0);	
	};
	function myAction16(){	
		if (!blPreviewOpen) return;	
		LODOP.DO_ACTION("PREVIEW_CLOSE",0);
		blPreviewOpen=false;	
	};
	function OpenPreview() {
	        LODOP=getLodop(document.getElementById('LODOP_X'),document.getElementById('LODOP_EM')); 
		LODOP.PRINT_INIT("打印控件Lodop功能演示_自己设计预览界面");
		LODOP.SET_PRINT_STYLE("FontSize",21);
		for(i=1;i<4;i++){
	        	var strBH=document.getElementById("BH"+i).value;
		   	var strMC=document.getElementById("MC"+i).value;
			var strSL=document.getElementById("SL"+i).value;
			var strDJ=document.getElementById("DJ"+i).value;
			LODOP.NEWPAGEA();
			LODOP.ADD_PRINT_RECT(10,18,324,392,0,1);
			LODOP.ADD_PRINT_TEXT(61,58,258,54,"商品编号："+strBH);
			LODOP.ADD_PRINT_TEXT(145,58,258,54,"商品名称："+strMC);
			LODOP.ADD_PRINT_TEXT(229,58,258,54,"商品数量："+strSL);
			LODOP.ADD_PRINT_TEXT(312,58,258,54,"商品单价："+strDJ);
		}	
		//LODOP.SET_PRINT_PAGESIZE(0,1380,2450,"A4");
		LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT","Full-Page");//按整页缩放
		LODOP.SET_SHOW_MODE("HIDE_PAPER_BOARD",true);//隐藏走纸板
		LODOP.SET_PREVIEW_WINDOW(0,3,0,0,0,""); //隐藏工具条，设置适高显示
		LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE",true); //预览界面内嵌到页面内
		LODOP.PREVIEW();
		blPreviewOpen=true;			
	};
	function getMyValue(strType,oResultOB){
		var LODOP=getLodop(document.getElementById('LODOP_X'),document.getElementById('LODOP_EM')); 
		if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){if (oResultOB) oResultOB.value=Value;}; 
		var stResult=LODOP.GET_VALUE(strType,"0");
		if (!LODOP.CVERSION) oResultOB.value=stResult; 
	};

	if (needCLodop()) {
		window.On_CLodop_Opened=function(){
			OpenPreview();							
			window.On_CLodop_Opened=null;
		};					
	} else 
	window.onload = function(){OpenPreview();};
	
</script>

</body>
</html>