一、lodop使用教程之图文详解

LODOP是专业WEB控件，用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大，但是却简单易用。

本教程云官网为例：

首先打开百度输入'lodop',直接点击第一项（先进行插件下载），如下图：

进入官网下载页面，如果仅仅是想实现打印功能，推荐使用下载综合版，点击第一项，进行下载，如下图：

下载后的文件大约是在7M左右，为压缩包，需要解压，html文件为一些简单打印实例，解压后如下图：

注意：

使用lodop打印控件需要在本地安装打印插件，根据本地系统，如果是32位系统的安装" install_lodop32.exe " ,如果是64位操作系统安装 " install_lodop64.exe "，点击右键以管理员身份进行，这个不需要其他设置，直接下一步到底，然后还要需要安装云打印插件： " CLodop_Setup_for_Win32NT.exe "，还是下一步到底，安装完成后，查看是否安装成功，而且是否可用性，进入官网主页，点击在线演示，如下图：

进入在线演示后，鼠标往下滑，在“样例清单”中选中第一下，如下图：

点击“查看本机是否安装了空间或云打印”，如果弹出了打印的具体版本信息，则说明安装已经成功，如下图所示：

通过以上测试，没有问题后，就可以在项目中引入，使用lodop控件了。

二、 react项目中如何引入打印控件CLodop

复制下面几个文件，到react项目中：

在组件中引入LodopFuncs.js和js中的getLoop方法：

这里有个小问题：如果直接引入LodopFuncs.js，会报错：

原因是： react环境下找不到getLodop和CLODOP对象，需要再前面添加window。

下面就是使用的完整代码：

三、 lodop 详细方法/参数的配置说明

1、相关文件

·install_lodop32.exe和install_lodop64.exe

这俩文件是安装和升级Lodop控件的主程序，对应32位和64位浏览器（注意浏览器位数不是操作系统位数）

提供给用户下载后使用，如果将它们复制或改名为uninstall_lodop32.exe(名前加un)就可用其卸载控件。

·CLodop_Setup_for_Win32NT.exe

这是web打印服务C-Lodop标准版安装主程序，它是个JS服务(内含Lodop)，适合所有浏览器，可替代前者。

·LodopFuncs.js

该文件是个样例(很简单尽量看懂它)，其中的getLodop过程根据浏览器类型检查是否安装、是否最新版本，

然后引导用户对应下载执行install_lodopXX.exe文件或CLodop_Setup_for_Win32NT.exe。

·实体文件

Lodop控件被安装后，其实体文件CAOSOFT_WEB_PRINT_LODOP.OCX和NPCAOSOFT_WEB_PRINT_lodop.dll

被安装在系统Program Files\MountTaiSoftware\Lodop目录下，而C-Lodop实体被安装在：

Program Files\MountTaiSoftware\CLodop32下，其中CLodopPrint32.exe是主服务程序。

2、主要接口函数

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打印设计

最基本的打印过程至少有初始化语句、添加内容语句和打印语句三部分组成，例如：

3、控件参数

Lodop有如下控件参数,以页面object对象元素的参数形式使用：

Caption

名称：设置控件的显示标题

格式： < pa ram name="Caption" value="我是打印控件lodop" >

功能：控件在页面内一般是以object元素形式被引用。可以通过设置元素的width和height等于0来隐藏控件，不隐藏时可以为控件设置一个标题，以便于看到控件是否被正确安装，以及控件对象在页面内的位置。希望打印预览界面或设计界面内嵌到网页内时，本参数很有用。

Color

名称：设置控件的显示区域颜色

格式： < par am name="Color" value="#C0C0C0" >

功能：通过该参数设置控件显示区域的底色，对于希望打印预览界面或设计界面内嵌到网页内时，本参数可以让控件容易融于整体页面。

参数值采用超文本颜色形式，可以是三色16进制值组合，也可以是英文颜色名。

Border

名称：设置控件的显示区域边界

格式： < par am name="Border" value="1" >

功能：通过该参数设置控件显示区域的边界，值等于1表示有边界，否则无边界。本参数可以让控件更融于整体页面。

lodop在js中如何使用(react项目中如何实现打印功能）