在线打印的使用（选择性打印）

本功能用于完成在线打印的功能

步骤1:引入打印控件，并对打印控件进行加载

View Code

< script type ="text/javascript" src ="CheckActivX.js" ></ script >
< object id ="LODOP" classid ="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width =0 height =0 >
</ object >
<!-- 加载打印控件 -->
< script language ="javascript" >
var LODOP = document.getElementById( " LODOP " ); // 这行语句是为了符合DTD规范
CheckLodop();
</ script >

步骤2：添加打印按钮

View Code

< input type ="button" class ="button" value ="打印" onclick ="MyPreview();" />

步骤3：编写打印函数，读取打印数据，显示打印预览。

 方法1：直接读取页面元素（复杂页面样式有时非常难看）

View Code

< script language ="javascript" type ="text/javascript" >
function MyPreview() {
LODOP.PRINT_INIT( " 打印控件功能演示_Lodop功能_分页输出一 " );
LODOP.SET_PRINT_PAGESIZE( 1 , 0 , 0 , " A4 " );
// 打印一个表格
LODOP.ADD_PRINT_HTM( 1 , - 680 , 2100 , 2970 ,document.getElementById( " printdiv " ).innerHTML);
// 打印预览
LODOP.PREVIEW();
};

</ script >

前台html

View Code

< div id ="printdiv" style ="text-align:left;" >
< div id ="doc1" align ="center" >
打印的内容
</ div >
</ div >

 方法2：从后台读取数据（推荐）

  < script language ="javascript" type ="text/javascript" >
/* 打印 */
function MyPreview() {

var xn = "2010";

var itemid = 5;
$.ajax({
type: " POST " ,
data: {xn:xn,itemid:itemid},
url: " printTopTenApp.action?uid= " + Math.random(),
success : function (data) {
LODOP.PRINT_INIT( " 打印控件功能演示_Lodop功能_分页输出一 " );
LODOP.SET_PRINT_PAGESIZE( 1 , 0 , 0 , " A4 " );
// 打印一个表格
LODOP.ADD_PRINT_HTM( 0 , 0 , 800 , 1000 ,data);
// 打印预览
LODOP.PREVIEW();
}
});
}
</ script >

后台数据的构建

View Code

List < HashMap > list = null ; // 获取数据列表

// 读取打印文件
String path = request.getScheme() + " :// "
+ request.getServerName() + " : " + request.getServerPort()
+ request.getContextPath() + " /bizroot/jw/template/topTenTeacherPrintTemplate.vm " ;
URL filepath = new URL(path);
// 读取URL，获取输入流
InputStream is = filepath.openStream();
// 将流变成字符串
BufferedReader br = new BufferedReader( new InputStreamReader(is));
StringBuffer sb = new StringBuffer();
String str = null ;
while ((str = br.readLine()) != null ){
sb.append(str.trim());
}
StringBuffer items = new StringBuffer();
String item = "" ;
// 遍历数据
for ( int i = 0 ;i < list.size();i ++ ){
item = " <tr> " +
" <td bgcolor=\"#f4f7fa\" width=\"55\" align=\"center\"> " +
(i + 1 ) +
" </td> " +
" <td bgcolor=\"#f4f7fa\" width=\"200\" align=\"center\"> " +
list.get(i).get( " XM " ).toString() +
" </td> " +
" <td bgcolor=\"#f4f7fa\" width=\"80\" align=\"center\"> " +
list.get(i).get( " XBMC " ).toString() +
" </td> " +
" <td bgcolor=\"#f4f7fa\" width=\"80\" align=\"center\"> " +
list.get(i).get( " BMMC " ).toString() +
" </td> " +
" <td bgcolor=\"#f4f7fa\" width=\"100\" align=\"center\"> " +
list.get(i).get( " ITEM_NAME " ).toString() +
" </td> " +
" <td bgcolor=\"#f4f7fa\" width=\"100\" align=\"center\"> " +
list.get(i).get( " TERM_SCORE " ).toString() +
" </td> " +
" </tr> " ;
items.append(item);
}
String result = sb.toString();
String title = " 统计排名 " ;
result = result.replace( " $title$ " ,title);
result = result.replace( " $content$ " ,items.toString());
responseTxt(result); // 将字符串返回到前台

模板文件

View Code

< div id ="divall" >
< div id ="doc1" >
< div id ="article" >
< h1 align =center >
$title$ </ h1 >
< br />
< div id ="wen" >
< div id ="clickeye_content" >
< table align ="center" bgcolor ="#cadadf" border ="0" cellpadding ="2" cellspacing ="1"
width ="630" >
< tr >
< td bgcolor ="#f4f7fa" width ="55" align ="center" >
< b > 序号 </ b >
</ td >
< td bgcolor ="#f4f7fa" width ="100" align ="center" >
< b > 教师 </ b >
</ td >
< td bgcolor ="#f4f7fa" width ="100" align ="center" >
< b > 系处 </ b >
</ td >
< td bgcolor ="#f4f7fa" width ="150" align ="center" >
< b > 教研室 </ b >
</ td >
< td bgcolor ="#f4f7fa" width ="100" align ="center" >
< b > 评教方案 </ b >
</ td >
< td bgcolor ="#f4f7fa" width ="100" align ="center" >
< b > 评教得分 </ b >
</ td >
</ tr >
$content$
</ table >
</ div >
</ div >
</ div >
</ div >
</ div >

相关附件：

在线打印控件js

模板文件

在线打印更多实例

扩展：选择性打印

选择自定义打印时，完成选定记录的打印；选择连续记录选择时，连续打印从第n条到第n条的记录

（1）html元素

html

< input id ="default" type ="radio" name ="mode" checked ="checked" onclick ="change(this)" value ="0" /> 自定义选择 < input id ="new" type ="radio" name ="mode" onclick ="change(this)" value ="1" /> 连续记录选择 &nbsp;&nbsp;&nbsp;&nbsp;
从第 < input type ="text" name ="bindex" id ="bindex" onkeyup ="value=value.replace(/[^\d]/g,'')" style ="width:20px" disabled ="disabled" <s:if test ="#request.pagebean.totalRows==0" > value="0" </ s:if >< s:else > value="1" </ s:else > />
条 到 第 < input type ="text" name ="eindex" id ="eindex" onkeyup ="value=value.replace(/[^\d]/g,'')" style ="width:20px" disabled ="disabled" value ='<s:property value ="#request.pagebean.totalRows" /> ' />条

(2) Js函数

js

  /*选择性打印*/
  function MyPreview() {     
   //获取选择的记录ID
   var form = document.getElementById("form1");
   //获取学年   
   var xn = $('#xnList').val();
   //获取评教项目
   var itemid = $('#itemid').val();
   var mode = 0;
   var bindex = "";
   var eindex = "";
   var chkvalue="";
   
      if(document.getElementById("default").checked == true){ //如果是选择性打印
       var checkboxs = document.getElementsByName("chk"); //获得复选框
       var count =0;
       var chk="";
       for(var i=0;i<checkboxs.length;i=i+1)
       {
          if(checkboxs[i].checked==true)
          {
              chk=checkboxs[i].value;
              chkvalue = chkvalue+chk+",";
              count=count+1;
          }
        }
       if(count<1)
       {
          alert("请选择要打印的记录！");
          return false;
       }
       else
       {
           var len = chkvalue.length;
           chkvalue = chkvalue.substring(0,len-1);
        }
   }else{
    mode = 1;
    bindex = $("#bindex").val();
    eindex = $("#eindex").val();
   }
   
   //获取数据  
   $.ajax({
               type: "POST",
               data: {idstr:chkvalue,xn:xn,itemid:itemid,mode:mode,bindex:bindex,eindex:eindex},
               url: "printTopTenApp.action?uid="+Math.random(),
               success : function(data) {
                  LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_分页输出一");  
     LODOP.SET_PRINT_PAGESIZE(1,0,0,"A4");  
     //打印一个表格
     LODOP.ADD_PRINT_HTM(0,0,800,1000,data);
     //打印预览
     LODOP.PREVIEW();
               }
            });
  }

/*连续选择时状态改变*/
function change(cp){
if(cp.id == "new"){ //选择连续选择
var arr = document.getElementsByName("chk");
for(var i=0;i < arr .length;i++){
arr[i].disabled = "true" ;
}
$('#bindex').removeAttr("disabled");
$('#eindex').removeAttr("disabled");
}else{
var arr = document.getElementsByName("chk");
for(var i =0;i<arr.length;i++){
$('#'+arr[i].id).removeAttr("disabled");
}
document.getElementById("bindex").disabled = "true" ;
document.getElementById("eindex").disabled = "true" ;
}
}

 

选择性打印界面：

作者：郑军祥

转载于:https://www.cnblogs.com/dsideal/archive/2011/03/08/1977477.html