赞
踩
首先在lodop官网下载相关文件(js、css等):http://www.lodop.net/download.html
在下载好的包里 除了html页面 其他的js、css等拷贝到项目的一个目录下、新建个lodop文件夹。
lodop主要接口函数如下:
● PRINT_INIT(strPrintTaskName)打印初始化
● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
● ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
● ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
● ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
● ADD_PRINT_SHAPE(intShapeType, intTop,intLeft, intWidth, intHeight,intLineStyle ,intLineWidth ,intColor)画图形
● SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
● PREVIEW打印预览
● PRINT直接打印
● PRINT_SETUP打印维护
● PRINT_DESIGN打印设计
在页面头部加入下面等信息、这里注意的是引入的文件地址
<script language="javascript" src="../res/lodop/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 pluginspage="../res/lodop/install_lodop32.exe"></embed>
</object>
打印有两种方式
第一种可以直接在js代码拼接打印信息
var LODOP=getLodop();
LODOP.PRINT_INIT("test套打");
LODOP.SET_PRINT_PAGESIZE(1,'200mm','152.4mm',''); //设置纸张高度
LODOP.ADD_PRINT_TEXT(10,250,157,20,'客户公司名称'); //这里的数字是调整相应位置
LODOP.ADD_PRINT_TEXT(432,149,157,20,'联系电话');
//LODOP.PRINT(); //直接打印
LODOP.PREVIEW(); //打印预览
第二种是 html代码写好打印信息,再到js 获取html内容 用lodop进行添加
var LODOP=getLodop(); LODOP.PRINT_INIT("test套打"); LODOP.ADD_PRINT_HTM(10,55,"100%","100%",document.getElementById("textarea01").value); //LODOP.PRINT(); //直接打印 LODOP.PREVIEW(); //打印预览 <textarea rows="15" cols="80" style="display: none;" id="textarea01"> <table border="1" width="360" height="220" style="border-collapse:collapse;border:solid 1px" bordercolor="#000000"> <tr> <td width="100%" height="240"> <p align="center"> <font face="隶书" size="5" style="letter-spacing: 10px">郭德强</font> <p align="center"><font face="宋体" size="3">科学家</font></p> <p align="left"><font face="宋体" size="3"> 地址:中国北京社会科学院附近东大街西胡同</font></p> <p align="left"><font face="宋体" size="3"> 电话:010-88811888</font></p> <p><br> </p> </td> </tr> </table> </textarea>
下面附上测试页面的代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script type="text/javascript" src="../res/vankewebstyle/js/jquery-1.9.0.js"></script> <script language="javascript" src="../res/lodop/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 pluginspage="../res/lodop/install_lodop32.exe"></embed> </object> <script type="text/javascript"> $(function(){ $("#kkk").click(function(){ var LODOP=getLodop(); LODOP.PRINT_INIT("test套打"); LODOP.ADD_PRINT_HTM(10,55,"100%","100%",document.getElementById("textarea01").value); /* LODOP.SET_PRINT_PAGESIZE(1,'200mm','152.4mm',''); //设置纸张高度 LODOP.ADD_PRINT_TEXT(10,250,157,20,'客户公司名称'); LODOP.ADD_PRINT_TEXT(432,149,157,20,'联系电话'); */ //LODOP.PRINT(); LODOP.PREVIEW(); }) }) </script> <body> <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="../res/lodop/install_lodop32.exe"></embed> <textarea rows="15" cols="80" style="display: none;" id="textarea01"> <table border="1" width="360" height="220" style="border-collapse:collapse;border:solid 1px" bordercolor="#000000"> <tr> <td width="100%" height="240"> <p align="center"> <font face="隶书" size="5" style="letter-spacing: 10px">郭德强</font> <p align="center"><font face="宋体" size="3">科学家</font></p> <p align="left"><font face="宋体" size="3"> 地址:中国北京社会科学院附近东大街西胡同</font></p> <p align="left"><font face="宋体" size="3"> 电话:010-88811888</font></p> <p><br> </p> </td> </tr> </table> </textarea> <input type="button" value="打印凭证" id="kkk"/> </body> </html>
补充:
用了window的print方法 在其它浏览(360、等)不能预览 ,而是直接弹出打印设置、只有谷歌弹出了打印预览的界面
$("#kkk").click(function(){
dy1html=document.getElementById("textarea01").value; //获取打印内容
window.document.body.innerHTML=dy1html; //将获取的内容替换当前页
window.print(); //打印当前页
document.location.reload(); //重新加载页面
})
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。