lodop打印控件——前端学习笔记

前言：花了三个礼拜做了一个小demo，涉及的技术从数据库到java再到前端，虽然不是很高深的东西，但是涉及的知识还是比较多的，这里整理了一下，和大家一起分享。

lodop打印控件
这是本菜鸟第一次使用lodop这个控件，用起来效果还不错，我是用来实现打印和导出excel文件的。特点是：实现简单，功能强大（绝对不是打广告啊）。话不多说，直接上JS代码。
以下代码实现的功能是：从grid表单里获取每个单元格的数据，封装在<table>标签里面，以便于lodop的函数调用，最后通过LODOP.PREVIEW()和

LODOP.SAVE_TO_FILE("MEDI.xls")实现打印和导出功能。

http://www.yien-xu.com/blog/show-132.aspx
/*-----打印事件-----------------------------------*/
function doPrint(){
createTABLE();
LODOP.PREVIEW();
}
//将选中行数据写成表格形式，并加载到打印控件上
function createTABLE()
{
var print1="<table border=1 cellspacing=0 cellpadding=2> <tr> <th>药品名称/规格</th> <th>产地名称</th> <th>单位</th> <th>库存上限</th> <th>库存下限</th>";
var print2="</tr>";
var idarray = medi_grid.getCheckedRows(0);
var id_arrary = new Array();
id_arrary = idarray.split(",");
for(i = 0;i < id_arrary.length;i++){
var cellObj1=medi_grid.cells(id_arrary[i],2).getValue();//得到某行第3列的值
var cellObj2=medi_grid.cells(id_arrary[i],3).getValue();//得到某行第4列的值
var cellObj3=medi_grid.cells(id_arrary[i],4).getValue();//得到某行第5列的值
var cellObj4=medi_grid.cells(id_arrary[i],5).getValue();//得到某行第6列的值
var cellObj5=medi_grid.cells(id_arrary[i],6).getValue();//得到某行第7列的值
print2+="<tr><td>";
print2+=cellObj1;
print2+="</td> ";
print2+="<td>";
print2+=cellObj2;
print2+="</td>";
print2+="<td>";
print2+=cellObj3;
print2+="</td>";
print2+="<td>";
print2+=cellObj4;
print2+="</td>";
print2+="<td>";
print2+=cellObj5;
print2+="</td></tr>";

}
print1+=print2
print1+="</table>";

LODOP=getLodop();
LODOP.SET_PRINT_STYLE("FontSize",5);
LODOP.SET_PRINT_STYLE("Bold",1);
LODOP.PRINT_INIT("打印控件功能演示");
LODOP.ADD_PRINT_TEXT(11,"45%",150,98,"药品打印信息");
LODOP.ADD_PRINT_TABLE(30,20,"100%","100%",print1);
}
/*----------------excel导出事件-----------------------------------*/
function doExport(){
createTABLE();
LODOP.SAVE_TO_FILE("MEDI.xls");
//medi_grid.toExcel("http://localhost:8080/SpringMVC_01/generate.php");
}

当然，在用Lodop之前，必须要引入js文件以及相应的初始化代码。
<script>
 <script type="text/javascript" src="js/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></embed>

      </object>
</script>