lodop 打印控件的使用

先看效果图 :

lodop插件  需要安装

打印浏览效果:

实现打印的前提条件

去官网下载几个js包 : http://www.lodop.net/download.html 添加到项目中

图片如下:

把下面这段代码加入到 web 前端需要打印功能页的相应位置

<script language="javascript" src="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></embed>
</object>

我自己封装的打印js代码(封装成 table 格式的数据 )

 1     function prn1_preview() {
 2         var LODOP = getLodop(document.getElementById(‘LODOP_OB‘), document.getElementById(‘LODOP_EM‘));
 3         LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印表格");
 4
 5         var theads = "<thead ><tr><th width=‘300px‘>菜名</th><th width=‘50px‘>份数</th><th width=‘50px‘>价格</th><th width=‘150px‘>姓名</th><th                          width=‘150px‘>时间</th></tr></thead>"
 6         var tableBodyStar = "<table border=‘1‘>";
 7         var tableBodyEnd = "</table>";
 8         var tableHead = "<caption style=‘width:200px;‘>点餐列表</caption>"
 9
10         var tableBody;
11
12         $(LodopValue).each(function () {
13
14             var menuname = "<tr><th width=‘300px‘>" + this.menu_name;
15             var listnumber = "</th><td width=‘50px‘>" + this.list_number;
16             var clistprice = "</td><td width=‘50px‘>" + this.clist_price;
17             var employeeloginName = "</td><td width=‘150px‘>" + this.employee_loginName;
18             var clisttime = "</td><td width=‘150px‘>" + timeS(this.clist_time);
19          //   alert(menuname);
20           tableBody += menuname + listnumber + clistprice + employeeloginName + clisttime + "</td></tr>";
21           //  alert(tableBody);
22         });
23
24       var t = tableBodyStar;
25         t += tableHead;
26         t += theads;
27         t += tableBody;
28         t += tableBodyEnd;
29
30         LODOP.ADD_PRINT_HTM(60, 20, 800, 1000, t );
31         LODOP.PREVIEW();
32     };

注意: 上面的 LodopValue 是我定义的一个全局变量,是datagrid 里面的数据  :

onLoadSuccess: function (data)

{
     var rows = data.rows;

}

LodopValue = rows; //  打印的数据主要是 rows中的数据

时间: 2024-07-29 06:58:30

lodop 打印控件的使用的相关文章

Web打印 Lodop打印控件 bootstrap框架

一.下载Lodop打印控件http://www.lodop.net/ 二.将解压的Lodop文件夹加入到项目中 三.在web页面中引入Lodop的js文件 <script src="../Scripts/Lodop/LodopFuncs.js"></script> <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" wi

lodop打印控件一点记录

今天初步接触了下打印控件 LODOP实现了自动分页,高度宽度都可以自己设定来分页. 页码,使用LODOP.SET_PRINT_STYLE("ItemType", 2); LODOP.ADD_PRINT_TEXT(0,0,"95%",30,"总页号:第#页/共&页"); 让每个分页都显示页码/总页数,#当前页,$总页数. 每页页眉页脚.使用LODOP.SET_PRINT_STYLE("ItemType", 1); 来让其

Lodop打印控件传入css样式、看是否传入正确样式

Lodop中可以传入页面存在的css样式,也可以是拼接后的新样式,例如本博客的其他博文:Lodop打印如何隐藏table某一列 需要打印的页面,样式不一定都是行内样式,style样式单独写在页面上,或引用的是.css文件等情况,使用Lodop打印控件进行打印超文本的时候,要注意把样式也传进去.可参考LODOP官网的样例10(或下载中心综合版里自带的样例10),如图,就是该样例的几种引用css样式的方式: 引入之后,可以通过打印设计(PRINT_DESIGN) 选中超文本打印项-右键-把查看到的超

利用lodop打印控件轻松实现批量打印

最近在做一个打印程序,要实现批量打印功能,在网上找了很多天,也在tp官网咨询大牛们,对大家的的提议我一一进行了研究,总结如下:要实现批量打印可以有两个办法: 一是利用专业的报表程序,能实现十分复杂的需求,但学习报表也是很痛苦的一件事,我专心研究了一天都没啥进展,也许我实在太菜了.这种方法推荐锐浪报表,免费还好用. 二是利用js插件实现,也在网上找了很多,最后感谢hunduncn,他建议我使用lodop(详见:http://www.thinkphp.cn/topic/12938.html),由于对

Lodop打印控件

首先引用js 4 <script type="text/javascript" src="jquery.min.js"></script> 5 <script type="text/javascript" src="http://127.0.0.1:9999/CLodopfuncs.js?priority=1"></script> 6 <script type="

lodop打印控件打印申通快递单

第一步先引入插件所用到的JS,插件官网http://www.lodop.net/ 放到head里面 <script language="javascript" src="js/LodopFuncs.js"></script> <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 heig

Lodop打印控件不打印css背景图怎么办

background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法输出背景图,在超文本中也可以用普通图片利用层级关系作为背景图输出,img图片设置样式z-index为负值(例如style='z-index: -1;).其他背景图及输出方法,可参考本博客其他博文. Lodop打印html超文本可以输出css背景色,但是不能输出背景图,见图一: 通过设置img图片设置

LODOP打印控件之LODOP.NewPageA()方法

通过lodop的强制分页方法,当我们一次性需要打印多张单页面的时候,可以通过该方法实现一次性打出,而不是重复调用打印方法,容易出问题 LODOP.NewPageA(); 说明:强制分页,注意是.NewPageA(),而不是.NewPage()

WEB打印控件Lodop应用实例

asp.net环境下LODOP打印控件的应用例子. 这篇文章发布在我的个人网站上,下面是原文的链接地址. http://www.itstu.net/plus/view.php?aid=95