web 项目实现打印机功能

之前有 web 项目要用到打印机功能，来打印小票；
我在网上搜了下就是简单的 js 代码来实现打印机；
但我的业务不能在页面再来设计打印的功能的配置；

所以我找了个第三方的浏览器控件——Lodop
我就是使用的 Lodop

首先来配置环境

先来下载 Lodop 的环境
Lodop 综合版(Lodop6.226+CLodop3.083)

在下载的压缩文件解压缩后的 CLodop_Setup_for_Win32NT.exe 安装，就可以使用了。

使用

在 html 导入,在 head 或 body 中加入

<script language="javascript" src="LodopFuncs.js"></script>

使用的话

var LODOP=getLodop();//直接这样就得到了打印控件对象

常用的方法

PRINT_INIT(strPrintTaskName)//打印初始化
SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)//设定纸张大小
ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)//增加超文本项
ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)//增加纯文本项
ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)//增加表格项
ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)//画图形
SET_PRINT_STYLE(strStyleName, varStyleValue)//设置对象风格
PREVIEW()//打印预览
PRINT()//直接打印
PRINT_SETUP()//打印维护
PRINT_DESIGN()//打印设计

这里使用它的官方的样例

<script language="javascript" type="text/javascript">        
        var LODOP; //声明为全局变量       
	function myPrint() {		       
		CreatePrintPage();       
		LODOP.PRINT();		       
	}; 
	function CreatePrintPage() {       
		LODOP=getLodop();         
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片");       
		LODOP.ADD_PRINT_RECT(10,55,360,220,0,1);       
		LODOP.SET_PRINT_STYLE("FontSize",11);       
		LODOP.ADD_PRINT_TEXT(20,180,100,25,"郭德强");       
		LODOP.SET_PRINT_STYLEA(2,"FontName","隶书");       
		LODOP.SET_PRINT_STYLEA(2,"FontSize",15);		       
		LODOP.ADD_PRINT_TEXT(53,187,75,20,"科学家");       
		LODOP.ADD_PRINT_TEXT(100,131,272,20,"地址：中国北京社会科学院附近东大街西胡同");       
		LODOP.ADD_PRINT_TEXT(138,132,166,20,"电话：010-88811888");	       
	};      
</script> 

预览效果：

更直观的方法

上面的方法其实还是有点抽象的
Lodop 也提供了直接打印 html 的方法

//直接将idName的内容打印出来
var strHtml  = document.getElementById("idName").innerHTML
LODOP.ADD_PRINT_HTM(10,55,"100%","100%",strHtml);

我是用的这个来打印小票；

更多详细内容，请看官方文档
http://www.lodop.net/LodopDemo.html