js打印(控件)及多种方式
非常好用的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> <objectid="LODOP"classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA"width="0"height="0"></object> </title>
<asp:LabelID="Label2"runat="server"Text="分店:"></asp:Label><asp:LabelID="FendName"runat="server"Text=""></asp:Label> <asp:LabelID="Label3"runat="server"Text="日期:"></asp:Label><asp:TextBoxID="tBdate"runat="server"Width="95px"Height="18px"CssClass="Wdate"onfocus="WdatePicker()"></asp:TextBox> 至<asp:TextBoxID="tEdate"runat="server"Width="95px"Height="18px"CssClass="Wdate"onfocus="WdatePicker()"></asp:TextBox><inputtype="button"onclick="Preview()"class="zdfbtn"value="打 印"style="width: 70px;height: 25px;" /> <divstyle="height: auto; width: 900px; white-space: nowrap; overflow-x: visible;overflow-y: auto; white-space: normal; word-break: break-all; overflow: hidden;"id="tem"><tableclass="oa-el-grid-list"cellspacing="0"cellpadding="0"border="0"style="width: 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 };varLODOP;function Design1() {CreatePrintPage();//LODOP.SET_SHOW_MODE("HIDE_ITEM_LIST",true);//设置对象列表默认处于关闭状态LODOP.SET_SHOW_MODE("TEXT_SHOW_BORDER", 1); //设置字符编辑框默认为single LODOP.PRINT_DESIGN();};
或
<scriptsrc="../script/LodopFuncs.js"type="text/javascript"></script> <objectid="LODOP"classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA"width="0"height="0"></object><scriptlanguage="javascript"type="text/javascript">functionPreview() {CreatePrintPage();LODOP.PREVIEW();};functionCreatePrintPage() {//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;<scriptlanguage="javascript"type="text/javascript">functionPreview() {CreatePrintPage();LODOP.PREVIEW();};functiongetNowFormatDate() {varday= newDate();varYear= 0;varMonth= 0;varDay= 0;varHours= 0;varMinutes= 0;varCurrentDate= "";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;}returnCurrentDate;};functionCreatePrintPage() {LODOP.PRINT_INIT("收银员查询");LODOP.SET_PRINT_PAGESIZE(1,0,0,"A4");//A4纸张纵向打印 LODOP.SET_PRINT_STYLE("FontSize",18);varstrBodyStyle= "<style>table,td { border: 1 solid #000000;border-collapse:collapse;text-align: center; Font-Size:13px;float:left;}</style>";varstrFormHtml=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);//调整第二页上部间距varmyDate=getNowFormatDate();//获取到时间vara=document.getElementById("KeyValue_WHRQ").value;varb=document.getElementById("TextBox2").value;varname=document.getElementById("FendName").innerText;vartxtSelect= "";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;}varstr= "<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"> functionpritinf(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); }functionpreview() {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--><tableid="tb"border="0"cellpadding="0"cellspacing="0"class="oa-el-grid-list"style="font-size: 12px; width: 100%;"><%=TableHtml%></table><!--endprint--><inputtype="button"onclick="Preview();"class="zdfbtn"value="打 印"style="width: 70px;height: 25px;" /> <!--或--><inputtype="button"class="oa-el-btn-minlen"value="打印"onclick="document.all.WebBrowser.ExecWB(6,1)" /><inputtype="button"class="oa-el-btn-minlen"value="页面设置"onclick="document.all.WebBrowser.ExecWB(8,1)" /><inputtype="button"class="oa-el-btn-minlen"value="打印预览"onclick="document.all.WebBrowser.ExecWB(7,1)" />
小票打印
<scriptlanguage="javascript"type="text/javascript">functionPreview() {CreatePrintPage();LODOP.PREVIEW();};functionCreatePrintPage() {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>
转载于:https://www.cnblogs.com/elves/p/3599847.html
js打印(控件)及多种方式相关推荐
- lodop打印html包含图片,使用lodop.js打印控件打印table并分页等
使用lodop.js打印控件打印table并分页等 import {getLodop} from '@/utils/LodopFuncs.js' //打印表格 export default{ // n ...
- vue3项目ts文件引入LodopFuncs.js打印控件
//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例,可直接使用,建议理解后融入自己程序==var CreatedOKLodopObject, CLodopIsLoc ...
- lodop打印html内容,Lodop打印控件在页面如何使用
Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件. 客户端本地打印角色(即用户访问网站后 用自己链接的打印机进行客户端本地打印),步骤很少,部署简单: ...
- 关于Lodop打印控件
Vue项目中开发Lodop打印控件操作笔记. 1.进入官网下载控件,然后安装. 1 http://www.lodop.net/ 2.安装包里面有LodopFuncs.js,推荐使用官方js,网上也有很 ...
- 兼容所有浏览器的Web打印控件的设计方案
兼容所有浏览器的Web打印控件的设计方案 设计方案的简单实现网址:http://www.lc-simple.com/PrintTest/ 第一章:Web打印控件的原理 Web打印控件的工作的原理如下: ...
- C-lodop打印控件 实现批量打印
Lodop是什么? 官网链接 有人说她是Web打印控件,因为她能打印.在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来: 有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道 ...
- 自己开发基于Web的打印控件,真正免费不是共享
1.1.0.121 版的控件,更新如下 SetPrintBackground 已被取消 SetMediaHeader 去掉了两个参数,见被划掉的文字部分 在做项目中发现 ...
- 基于netty的浏览器客户端打印控件实现
项目地址:https://github.com/w414034207/print-netty 业务场景 给客户开发一个web管理系统时,客户要求能够在浏览器点击打印,直接使用客户端的本地打印机打印服务 ...
- 使用LODOP打印控件实现打印功能的解决方案
项目中有很多打印功能,一开始使用浏览器自带的打印功能,发现在不同的浏览打印效果上有着较大的差异,最终选择了LODOP打印控件来实现,记录下实现的大体思路. 1. LODOP的优势: 功能丰富:LODO ...
- web打印控件 LODOP的详细api
web打印控件 LODOP的详细api 篇幅较长,建议ctrl+F快速搜索关键字 你可以点击这里查看LODOP打印控件官网. Lodop发布包内主要有如下几个文件: install_lodop.exe ...
最新文章
- linux chattr命令
- vs2005 Key not valid for use in specified state
- hdu 3065 AC自动机
- Properties和IO流相结合的方法
- Spring体系常用方法(一)
- 年轻人的“第一次”寄快递?上有产品下有电商的小米注册快递商标
- 虚拟机安装centos7后无法联网
- 老愤青也来说两句,也谈青年程序员如何进入职场
- 一位前端工程师的Writing better code
- 大型企业用什么orm_企业信息化系统建设的方案有什么用?
- vue3仿网易云移动应用
- 如何通俗的解释全微分?
- Grafana图标嵌入第三方系统及可选择四种模式(kiosk)
- 晶体管共发射极应用电路
- DDD | 领域驱动设计 Vs 敏捷 Vs 面向对象
- 《超越LOGO设计:国际顶级平面设计师的成功法则(第2版)》—第1章无处不在的LOGO...
- 我写的一个 C++ 复数类
- 独享带宽和共享带宽的区别
- 第三周-周测-Rhizomys
- 树莓派安装系统之无显示器(最新版)
热门文章
- linux机器光口和电口的区别,易天光通信SFP电口模块和10G SFP+电口模块介绍
- Python爬虫之(五)Cookie和URLError
- NLP︱LDA主题模型的应用难题、使用心得及从多元统计角度剖析
- Linux下更改Python的软连接
- GO语言学习之路22
- Access字段类型“查阅向导”
- Docker技术入门与实战 第二版-学习笔记-9-Docker Compose 项目-1-举例说明
- layui + jfinal 实现上传下载
- IBM GTS部门或有重大调整,最快本周见分晓
- android sdk更新后出现please update ADT to the latest ve