非常好用的LODOP打印控件
Lodop打印控件简单使用方法
1.安装。
2.调用LodopFuncs.js文件。
3.增加OBJECT对象
<script language="javascript" src="LodopFuncs.js"></script>
<object id="LODOP" 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>
4.获取
<script language="javascript">
var LODOP=getLodop(document.getElementById('LODOP'),document.getElementById('LODOP_EM'));
</script>
5.调用函数
LODOP.函数名
（1）打印初始化（PRINT_INIT）
（2）设定纸张大小（SET_PRINT_PAGESIZE）
（3）增加打印项
---ADD_PRINT_HTM-增加超文本打印项(普通模式)
---ADD_PRINT_TABLE-增加表格打印项（超文本模式）
---ADD_PRINT_TEXT-增加纯文本打印项
---ADD_PRINT_IMAGE-增加图片打印项
---ADD_PRINT_BARCODE-增加条形码
（4）设置打印项风格（SET_PRINT_STYLEA）
（5）强制分页（NEWPAGEA）
（6）打印
---PREVIEW-打印预览
---PRINT-直接打印
---PRINT_SETUP-打印维护-目标使用者是最终用户
---PRINT_DESIGN-目标使用者是软件开发者
附：计量单位
本文所述px单位固定换算关系如下,与像素类似但不是一个概念，也不受显示影响：
1in(英寸)=2.54cm(厘米)=25.4mm(毫米)=72pt(磅)=96px
另外一个特殊的计量单位“%(百分比)”，是指相对于纸张大小的百分比值，其中“上、下边距、高度”等的百分比是相当对于纸张高度（横向打印时则是宽度）的比值，而“左、右边距和宽度”的百分比是相对于纸张宽度（横向打印时则是高度）的比值。
提示：打印预览时，虚线之外是物理不可打区域，不同的打印机其物理边距不一样
-------------------------------------------------------------------------------
边距：LODOP控件设置边距
每个打印项上边距、左边距，及纸张的宽度。
例：要设置左右边距为5px,可设置
LODOP.SET_PRINT_PAGESIZE(1, “200px”, “800px”, “”);
LODOP.ADD_PRINT_TABLE(“0”,”5px”,”190px”,””,document.getElementById(“my_tab”));//左右边距都为5px;
-------------------------------------------------------------------------------
打印宽度确定，长度不确定：
LODOP.SET_PRINT_PAGESIZE(3,”260px”,”10px”,””);
var table_height= document.getElementById(“my_tab”))..offsetheight();
LODOP.ADD_PRINT_TABLE(“0”,”5px”,”190px”, table_height,document.getElementById(“my_tab”).innerHTML);
-------------------------------------------------------------------------------
首先需要 下载、引用JS 脚本
<title> <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0"> </object> </title>
<asp:Label ID="Label2" runat="server" Text="分店："></asp:Label><asp:Label ID="FendName" runat="server" Text=""></asp:Label> <asp:Label ID="Label3" runat="server" Text="日期："></asp:Label> <asp:TextBox ID="tBdate" runat="server" Width="95px" Height="18px" CssClass="Wdate" onfocus="WdatePicker()"></asp:TextBox> 至 <asp:TextBox ID="tEdate" runat="server" Width="95px" Height="18px" CssClass="Wdate" onfocus="WdatePicker()"></asp:TextBox> <input type="button" onclick="Preview()" class="zdfbtn" value="打 印" style=" 70px; height: 25px;" /> <div style="height: auto; 900px; white-space: nowrap; overflow-x: visible; overflow-y: auto; white-space: normal; word-break: break-all; overflow: hidden;" id="tem"> <table class="oa-el-grid-list" cellspacing="0" cellpadding="0" border="0" style=" 80%; font-size: 12px;" id="tb"> <%=sMingXi%> </table> </div>
function CreatePrintPage() { LODOP = getLodop(); LODOP.PRINT_INIT("营业客账报表"); LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4纸张纵向打印 LODOP.SET_PRINT_STYLE("FontSize", 18); var strBodyStyle = "<style>table,td { border: 1 solid #000000;border-collapse:collapse;text-align: center; Font-Size:18px;float:left;}</style>"; var strFormHtml = strBodyStyle + "<body>" + document.getElementById("tem").innerHTML + "</body>"; LODOP.ADD_PRINT_HTM(140, 20, 1100, 500, strFormHtml); //需要打印的文本 LODOP.SET_PRINT_STYLEA(0, "FontSize", 18); var myDate = getNowFormatDate(); //获取到时间 var a = document.getElementById("txtStatDate").value; var b = document.getElementById("txtEndDate").value; var name = document.getElementById("FendName").innerText; // 设置打印打字 需要引用 js <script type="text/javascript" src="../../js/LodopFuncs.js"> LODOP.ADD_PRINT_TEXT(43, 500, 163, 35, "营业客账报表"); LODOP.SET_PRINT_STYLEA(0, "FontSize", 18); //设置上一句样式 LODOP.ADD_PRINT_TEXT(3, 500, 163, 35, name); LODOP.SET_PRINT_STYLEA(0, "FontSize", 18); //设置上一句样式 LODOP.ADD_PRINT_TEXT(89, 40, 400, 20, "查询条件：" + a + "至" + b); LODOP.SET_PRINT_STYLEA(0, "FontSize", 14); //设置上一句样式 LODOP.ADD_PRINT_TEXT(89, 800, 400, 20, "打印时间:" + myDate); LODOP.SET_PRINT_STYLEA(0, "FontSize", 14); LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //整宽 不变形 //四个数值分别表示Top, Left, Width, Height }; var LODOP; function Design1() { CreatePrintPage(); // LODOP.SET_SHOW_MODE("HIDE_ITEM_LIST",true);//设置对象列表默认处于关闭状态 LODOP.SET_SHOW_MODE("TEXT_SHOW_BORDER", 1); //设置字符编辑框默认为single LODOP.PRINT_DESIGN(); };
或
<script src="../script/LodopFuncs.js" type="text/javascript"></script> <object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0" height="0"> </object> <script language="javascript" type="text/javascript"> function Preview() { CreatePrintPage(); LODOP.PREVIEW(); }; function CreatePrintPage() { // LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_设置预览窗口界面"); // LODOP.SET_PRINT_PAGESIZE(1, 1380, 880, ""); // LODOP.ADD_PRINT_TEXT(80, 100, 400, 35, "观察预览窗口的变化"); // LODOP.SET_PRINT_STYLEA(0, "FontSize", 30); // LODOP.SET_PRINT_PAGESIZE(2, 0, 0, ""); // LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, ""); // LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1); //横向时的正向显示 //LODOP.PREVIEW(); LODOP.PRINT_INIT("消费明细单打印"); LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "A4"); //A4纸张纵向打印 LODOP.ADD_PRINT_HTM(40, 40, 1000, 500, document.getElementById("print").innerHTML); LODOP.SET_PRINT_STYLEA(1, "FontSize", 8); LODOP.ADD_PRINT_HTM(2, "30%", 740, 40, "<p style="text-align: center;Font-Size:20px;FONT-WEIGHT: bold">消费明细单打印</p>"); LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); // LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1); //横向时的正向显示 };时的正向显示 </script> var LODOP; <script language="javascript" type="text/javascript"> function Preview() { CreatePrintPage(); LODOP.PREVIEW(); }; function getNowFormatDate() { var day = new Date(); var Year = 0; var Month = 0; var Day = 0; var Hours = 0; var Minutes = 0; var CurrentDate = ""; Year = day.getFullYear(); //支持IE和火狐浏览器. Month = day.getMonth() + 1; Day = day.getDate(); Hours = day.getHours(); Minutes = day.getMinutes(); CurrentDate += Year; if (Month >= 10) { CurrentDate += "-" + Month; } else { CurrentDate += "-0" + Month; } if (Day >= 10) { CurrentDate += "-" + Day; } else { CurrentDate += "-0" + Day; } if (Hours >= 10) { CurrentDate += " " + Hours; } else { CurrentDate += " 0" + Hours; } if (Minutes >= 10) { CurrentDate += ":" + Minutes; } else { CurrentDate += ":0" + Minutes; } return CurrentDate; }; function CreatePrintPage() { LODOP.PRINT_INIT("收银员查询"); LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4纸张纵向打印 LODOP.SET_PRINT_STYLE("FontSize", 18); var strBodyStyle = "<style>table,td { border: 1 solid #000000;border-collapse:collapse;text-align: center; Font-Size:13px;float:left;}</style>"; var strFormHtml = strBodyStyle + "<body>" + document.getElementById("tem").innerHTML + "</body>"; LODOP.ADD_PRINT_HTM(85, 40, "RightMargin:0.9cm", "BottomMargin:9mm", strFormHtml); //打印间隙或宽高设置 LODOP.SET_PRINT_STYLEA(0, "Offset2Top", -50);//调整第二页上部间距 var myDate = getNowFormatDate(); //获取到时间 var a = document.getElementById("KeyValue_WHRQ").value; var b = document.getElementById("TextBox2").value; var name = document.getElementById("FendName").innerText; var txtSelect = ""; if (document.getElementById("DropDownList1").value != "-请选择-") { txtSelect += " 操作员:" + document.getElementById("DropDownList1").options[document.getElementById("DropDownList1").selectedIndex].text; } if (document.getElementById("DropDownList2").value != "-请选择-") { txtSelect += " 班次:" + document.getElementById("DropDownList2").options[document.getElementById("DropDownList2").selectedIndex].text; } var str = "<body>"; str += "<table style='Width:680px;'>"; str += "<tr style="text-align: center;">"; str += "<td colspan="3" style="position:relative;left:80px;Font-Size:20px;table-layout: fixed;word-break: break-all;FONT-WEIGHT: bold">" + name + "</td>"; str += "</tr>"; str += "<tr style="text-align: center;">"; str += "<td colspan="3" style="position:relative;left:80px;Font-Size:20px;table-layout: fixed;word-break: break-all;FONT-WEIGHT: bold"> 收银员查询</td>"; str += "</tr>"; str += "<tr>"; str += "<td style='border:0px solid red;position:relative; top:4px; left:5px;'colspan='3'>查询条件:" + a + "至" + b + txtSelect + " 打印时间:" + myDate + "</td>"; str += "</tr>"; str += "</table>"; str += "</body>"; LODOP.ADD_PRINT_HTM(2, 30, 740, 500, str); LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //整宽 不变形 }; </script>
帮助：http://www.lodop.net/demo.html
点击下载打印预览控件
自带打印：
<!--//普通打印--> <title> <object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0"> </object> </title> <script language="Javascript" type="text/javascript"> function pritinf(objtitle) { var nw = window.open('', '', 'width=900,height=600'); nw.document.write('<meta http-equiv="content-type" content="text/html;charset=utf-8">'); nw.document.write('<link rel="stylesheet" type="text/css" href="../../css/skin-green.css" />'); nw.document.write('<link rel="stylesheet" type="text/css" href="../../css/main.css" />'); nw.document.write('<style media="print" type="text/css"> '); nw.document.write('.Noprint{display:none;} '); nw.document.write('.PageNext{page-break-after: always;} '); nw.document.write('</style> '); nw.document.write('<body bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0">'); nw.document.write("<object classid='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2' id='wb'height='0' width='0'></object>"); nw.document.write("<center>"+objtitle+"<br /><br />"+document.getElementById("tb").outerHTML+"</center>"); nw.document.write("<scrip" + "t>docume nt.all.wb.ExecWB(7,1)</sc" + "ript>"); nw.document.write('</body>'); document.getElementById("wb").ExecWB(7,1); } function preview() { bdhtml = window.document.body.innerHTML; sprnstr = "<!--startprint-->"; eprnstr = "<!--endprint-->"; prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); window.document.body.innerHTML = prnhtml; window.print(); } </script>
<!--startprint--> <table id="tb" border="0" cellpadding="0" cellspacing="0" class="oa-el-grid-list" style="font-size: 12px; 100%;"> <%=TableHtml %> </table> <!--endprint--> <input type="button" onclick="Preview();" class="zdfbtn" value="打 印" style=" 70px; height: 25px;" /> <!--或--> <input type="button" class="oa-el-btn-minlen" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)" /> <input type="button" class="oa-el-btn-minlen" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)" /> <input type="button" class="oa-el-btn-minlen" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)" />
小票打印
<script language="javascript" type="text/javascript"> function Preview() { CreatePrintPage(); LODOP.PREVIEW(); }; function CreatePrintPage() { LODOP.PRINT_INIT("入住登记单打印"); LODOP.ADD_PRINT_HTM(10, 10, 280, 880, document.getElementById("print").innerHTML); //880原来800 ——5.8修改 230=》280 LODOP.SET_PRINT_STYLEA(1, "FontSize", 8); }; </script>