應需求接觸到lodop 打印、javascript
首先在lodop官網下載相關文件(js、css等):http://www.lodop.net/download.htmlcss
在下載好的包裏 除了html頁面 其餘的js、css等拷貝到項目的一個目錄下、新建個lodop文件夾。 html
在頁面頭部加入下面等信息、這裏注意的是引入的文件地址java
<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>
打印有兩種方式jquery
第一種能夠直接在js代碼拼接打印信息web
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>
下面附上測試頁面的代碼app
<%@ 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>
更多相關配置設置等可查看官網:http://www.lodop.net/demo.html測試
在下測試、谷歌瀏覽器不支持 其它火狐、ie、360、QQ瀏覽器都可ui
補充:在谷歌或其它瀏覽器不能打印的狀況下、找到了以下辦法
用了window的print方法 在其它瀏覽(360、等)不能預覽 ,而是直接彈出打印設置、只有谷歌彈出了打印預覽的界面
$("#kp").click(function(){
dy1html=document.getElementById("textarea01").value; //獲取打印內容
window.document.body.innerHTML=dy1html; //將獲取的內容替換當前頁
window.print(); //打印當前頁
document.location.reload(); //從新加載頁面
})
另外在百度時還搜索到
ireport、jqprint 插件