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>
<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="width: 70px;
height: 25px;" /> <div style="height: auto; width: 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="width: 80%;
font-size: 12px;" id="tb">
<%=sMingXi%>
</table>
</div>
function CreatePrintPage() {
LODOP = getLodop();
LODOP.PRINT_INIT("营业客账报表");
LODOP.SET_PRINT_PAGESIZE(, , , "A4"); //A4纸张纵向打印
LODOP.SET_PRINT_STYLE("FontSize", );
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(, , , , strFormHtml); //需要打印的文本
LODOP.SET_PRINT_STYLEA(, "FontSize", );
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(, , , , "营业客账报表");
LODOP.SET_PRINT_STYLEA(, "FontSize", ); //设置上一句样式
LODOP.ADD_PRINT_TEXT(, , , , name);
LODOP.SET_PRINT_STYLEA(, "FontSize", ); //设置上一句样式
LODOP.ADD_PRINT_TEXT(, , , , "查询条件：" + a + "至" + b);
LODOP.SET_PRINT_STYLEA(, "FontSize", ); //设置上一句样式
LODOP.ADD_PRINT_TEXT(, , , , "打印时间:" + myDate);
LODOP.SET_PRINT_STYLEA(, "FontSize", );
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", ); //设置字符编辑框默认为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; width: 100%;">
<%=TableHtml %>
</table>
<!--endprint--> <input type="button" onclick="Preview();" class="zdfbtn" value="打 印" style="width: 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>
js打印（控件）及多种方式的更多相关文章
- Arcgis API for JS——打印控件乱码
在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹
- 使用lodop.js打印控件打印table并分页等
import {getLodop} from '@/utils/LodopFuncs.js' //打印表格 export default{ // num 打印还是打印预览 conData 对象形式 传 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（16）--使用云打印控件C-Lodop打印页面或套打报关运单信息
在最新的MVC4+EasyUI的Web开发框架里面,我整合了关于网购运单处理的一个模块,其中整合了客户导单.运单合并.到货扫描.扣仓.出仓.查询等各个模块的操作,里面涉及到一些运单套打的操作,不过由于 ...
- [2014.01.27]wfPrintOcx 票据打印控件 v5.3
支持选择打印机,并自动记忆选择的打印机. 适合打印各类票据格式. 支持画正方形.长方形.圆形.椭圆.横线.竖线.HTTP图片. 支持数字金额转换成中文大写金额. 可以设置固定宽度的文字自动换行. 组件 ...
- 网页WEB打印控件制作-开放源码
在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的一件事件,本文将自己开发 ...
- Web打印控件smsx.cab使用说明
在项目开发中,经常会用到页面打印的功能,在ASP.NET环境下推荐一款web打印控件smsx.cab. 使用方法:一般会先定义一个用于打印的母版页(Print.Master),在母版页上做好布局 ...
- Lodop打印控件在页面如何使用
Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件.客户端本地打印角色(即用户访问网站后 用自己链接的打印机进行客户端本地打印),步骤很少,部署简单:Lo ...
- Lodop打印控件传入css样式、看是否传入正确样式
Lodop中可以传入页面存在的css样式,也可以是拼接后的新样式,例如本博客的其他博文:Lodop打印如何隐藏table某一列 需要打印的页面,样式不一定都是行内样式,style样式单独写在页面上,或 ...
- 如何设置C-Lodop打印控件的端口
Lodop是一款功能强大的打印控件,在一些浏览器不再支持np插件之后,Lodop公司又推出了C-Lodop,C-Lodop是以服务的方式解决web打印,摆脱了对浏览器的依赖,支持了所有的浏览器. 该控 ...
- LODOP打印控件进行批量打印
Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...
随机推荐
- 嵌入式linux驱动开发之点亮led（驱动编程思想之初体验）
这节我们就开始开始进行实战啦!这里顺便说一下啊,出来做开发的基础很重要啊,基础不好,迟早是要恶补的.个人深刻觉得像这种嵌入式的开发对C语言和微机接口与原理是非常依赖的,必须要有深厚的基础才能hold的 ...
- Bootstrap系列 -- 20. 禁用状态
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled” 在使用了“form-control”的表单控件中,样式设置了禁用表单背景 ...
- （旧）子数涵数·Flash——路径补间
一.打开flash软件(图为flash8) 二.创建新项目->Flash文档 三.使用椭圆工具,绘制一个圆形图像(快捷键为O,很形象吧) 四.在后面若干帧中插入关键帧,并移动刚刚绘制好的图像的位 ...
- [BZOJ 1085][SCOI2005]骑士精神（IDA*）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1085 分析: 首先第一感觉是宽搜,但是空间需要8^15*5*5,明显不够,又鉴于最大深 ...
- Samba实现Linux与Window文件的传输
Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的一种通 ...
- All thanks
How to make a salad?——Silun Wang 这是一次成功的团队合作,我为所有组员感到骄傲和自豪!感谢你们! 上个学期期末,和@老钱他们一起去五道口吃Pizza,谈到了大三上学期的 ...
- nginx下禁止访问robots.txt的设置方法
关于robots.txt文件:搜索引擎通过一种程序robot(又称spider),自动访问互联网上的网页并获取网页信 息.您可以在您的网站中创建一个纯文本文件robots.txt,在这个文件中声明该网 ...
- iOS边练边学--多线程NSOperation介绍，子类实现多线程的介绍（任务和队列），队列的取消、暂停（挂起）和恢复，操作依赖与线程间的通信
一.NSOperation NSOperation和NSOperationQueue实现多线程的具体步骤 先将需要执行的操作封装到一个NSOperation对象中 然后将NSOperation对象添加 ...
- 基于spring mvc的注解DEMO完整例子
弃用了struts,用spring mvc框架做了几个项目,感觉都不错,而且使用了注解方式,可以省掉一大堆配置文件.本文主要介绍使用注解方式配置的spring mvc,之前写的spring3.0 mv ...
- word中打出希腊字母
作为一个键盘党,不喜欢用鼠标去选择希腊字母,希望只用键盘就能在word中打出希腊字母. 方法是:按照下图所示对应表,先输入英文字母,然后选中它并按Ctrl+Shift+Q