先看效果图 :

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 格式的数据 )

     function prn1_preview() {
var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印表格"); 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>"
var tableBodyStar = "<table border='1'>";
var tableBodyEnd = "</table>";
var tableHead = "<caption style='width:200px;'>点餐列表</caption>" var tableBody; $(LodopValue).each(function () { var menuname = "<tr><th width='300px'>" + this.menu_name;
var listnumber = "</th><td width='50px'>" + this.list_number;
var clistprice = "</td><td width='50px'>" + this.clist_price;
var employeeloginName = "</td><td width='150px'>" + this.employee_loginName;
var clisttime = "</td><td width='150px'>" + timeS(this.clist_time);
// alert(menuname);
tableBody += menuname + listnumber + clistprice + employeeloginName + clisttime + "</td></tr>";
// alert(tableBody);
}); var t = tableBodyStar;
t += tableHead;
t += theads;
t += tableBody;
t += tableBodyEnd; LODOP.ADD_PRINT_HTM(60, 20, 800, 1000, t );
LODOP.PREVIEW();
};

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

onLoadSuccess: function (data)

{
     var rows = data.rows;

}

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

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

  1. Lodop打印控件在页面如何使用

    Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件.客户端本地打印角色(即用户访问网站后 用自己链接的打印机进行客户端本地打印),步骤很少,部署简单:Lo ...

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

    Lodop中可以传入页面存在的css样式,也可以是拼接后的新样式,例如本博客的其他博文:Lodop打印如何隐藏table某一列 需要打印的页面,样式不一定都是行内样式,style样式单独写在页面上,或 ...

  3. Lodop打印控件设置表格次页偏移

    Lodop打印控件有很好的自动分页功能,超文本table表格一页装不下,自动分到第二页,第三页……通常表格之前还会有一些内容,比如标题,制表人名称日期什么的杂七杂八的东西,这种东西会占用一定的空间,这 ...

  4. Lodop打印控件 超文本自动分页

    Lodop打印控件打印html超文本,通常传入一个超文本内容可能会超过纸张,如果要拆分每页显示哪些然后手动分页比较麻烦,Lodop中的超文本都有自动分页的特点.自动分页的依据:1.超文本超过设置的打印 ...

  5. Lodop打印控件指定打印任务某几页

    使用Lodop打印控件进行打印开发,有时候一个任务里有多页,例如各种合同之类的,客户端用户在使用过程中,可能有某一页打印后发现需要修改,这时候不必再把整个任务重新打印一遍,只需要打印需要修改的那页重新 ...

  6. LODOP打印控件进行批量打印

    Lodop打印控件批量打印的方式:1.批量打印每页内容相同的:(1)批量打印相同内容的很多纸张,可以设置打印份数,把该内容打印出多份.2.批量打印每页不同内容的:(1)通过在一个任务中分页,循环添加页 ...

  7. Lodop打印控件 打印‘接下一页’‘以下空白’

    Lodop打印控件中,超文本超过设置的打印项高度 或超过纸张,就会自动分页,纯文本通过设置为多页项也可以根据打印项高度自动分页,Lodop中还提供了许多手动分页的方法,对于多页文档中(自动分页或手动分 ...

  8. LODOP打印控件关联输出各内容

    Lodop打印控件利用SET_PRINT_STYLEA里面的“LinkedItem”可以把多个独立的内容关联起来,让它们顺序打印.这样,就可以实现很多效果,例如一些内容紧跟着表格下方输出,关联表格后就 ...

  9. Lodop打印控件里SET_PRINT_STYLE和SET_PRINT_STYLEA

    LODOP.SET_PRINT_STYLE 对该语句后面的打印项样式设置效果.LODOP.SET_PRINT_STYLEA 针对第一个参数设置的打印项样式设置效果.这两个语句,作用范围不同. 在设置字 ...

  10. Lodop打印控件输出页码(超文本和纯文本页码)

    Lodop打印控件打印超文本既可以手动分页,也可以自动分页,自动分页可阅读本博客的另一篇博文:Lodop打印控件 超文本自动分页 自动分页的时候,往往是不知道需要打印的内容到底分了几页,也就不可能预先 ...

随机推荐

  1. Android Developers:按需求加载视图

    有时候你的布局可能需要较少使用的复杂视图.无论它们是项目详情,进度指示器,或者处理的信息,你能通过在它们被需要的时候加载的方式,来减少内存消耗和加快显示. 定义一个ViewStub ————————— ...

  2. CSF 中的应用程序请求路由

    编辑人员注释:本文章由 AzureCAT 团队的 Christain Maritnez 撰写. 应用程序请求路由(简称为 ARR)可能是 Microsoft 使用的技术中讨论得最少但极为重要的技术之一 ...

  3. c#Winform程序的toolStripButton自己定义背景应用演示样例源代码

    C# Winform程序的toolStrip中toolStripButton的背景是蓝色的,怎样改变背景及边框的颜色和样式呢? 实现此功能须要重写toolStripButton的Paint方法 这里仅 ...

  4. java Script 中的keyCode 和charCode

    其实很长一段时间,我都没有完全弄明白keyCode 和charCode ,自己也认真看过,但是就是理解不透彻,为了防止以后再出现混乱,写篇博客记录一下吧! 首先  在不同的浏览器中,他们有不同的说法哦 ...

  5. 基本属性 - iOS中的本地通知

    本地通知的基本使用 创建本地通知 设置属性 调度通知(添加通知到本地通知调度池) 注册用户通知权限(只需一次, 可以单独放在Appdelegate中, 或者别的地方) —> iOS8以后必须, ...

  6. typeof操作符的返回值

    使用typeof操作符 对一个值使用typeof操作符可能返回下列某个字符串: 1):undefined——如果这个值未定义 2):boolean——如果这个值是布尔值 3):string——如果这个 ...

  7. Android 屏幕尺寸知识

    转自:http://www.zcool.com.cn/article/ZNjI3NDQ=.html 1.了解几个概念 (1)分辨率.分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏 ...

  8. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  9. apache基本配置

    apache基本配置               apache本地虚拟域名配置  

  10. web测试 结果存储类型为“Database”,但尚未指定结果储存库连接字符串

    vs2010 Ultimate版带有web测试功能,可以对网站的性能以及负载进行测试. 在进行负载测试时提示“异常 LoadTestConnectStringMissingException 1 Lo ...