Lodop打印

1.基本功能 1.基本功能

1.1.LODOP打印配置说明1.1.LODOP打印配置说明

打印有分两种,一种是单笔打印,一种是批量打印(一般是配置在表格上选中表格中多笔数据进行打印)。
单笔打印
h081503

批量打印(在表格的上方为批量打印)
h081504

打印下拉效果图按钮:
h081505
1)预览打印(弹窗预览后再点打印功能打印)
2)直接打印(点击就调用打印机)
不管是base64模板还是html模板预览打印都会弹出预览窗口。
h081506

2.配置方法 2.配置方法

2.1.LODOP打印配置说明 2.1.LODOP打印配置说明

配置

1.环境要求
需使用到的文件(最小升级包里面有)。
h081501

2.插件安装
点击打印按钮会自动检查插件是否安装,如果没安装会有链接下载安装插件,如已安装可以直接操作打印按钮。
h081502

3.对象建模–业务对象–业务对象管理:编辑业务对象,在【方法定义】tab页新增方法。调用方法名称(自定义)、调用方法描述(自定义)、方法类型(打印方法或者批量打印)、URL地址(业务对象名首字母小写/方法名)、操作类型(LODOP打印)。
lodop1

lodop2

文件路径填写方式:
1)http开头的网址(eg:http://www.baidu.com) 此种是最简单的,直接打印链接对应的内容(不常用)
可参考:http://www.lodop.net/demolist/PrintSample14.html说明

2)html页面模板名(当前项目根路径开始eg:/static/PrintSimple.html)
相对于项目下面的根路径算起,最开头以”/”开始(代码里向自动拼接上下文)。
针对批量打印,html模板支持选中多笔记录一起打印,在预览界面可以点下一页下一页进行预览(建议用html模板进行打印)
h081511

3)base64数据模板名(eg:printSimple),需到lodop官网上通过设计器设计出模板后再把模板转码为一串经过base64编码后台一段字符串,我们给定这个字符串一个变量名称为模板名。base64模板批量打印时只能选中一笔一笔打印没法在预览界面下一页预览(LODOP没看到对base64模板进行批量操作)
h081512

4.Html页面模板使用范例:
Html页面模板就是静态HTML+我们定的一种双括号表达式,eg:{{业务对象实例.属性}}。
因根目录是WebContent,所以上面的文件路径可以写为”/static/PrintSample3.html”,项目组可以把静态文件放到自己想要的目录,只要路径从根路径写对就行,下面是测试用的示例”PrintSample3.html”。
h081513

5.预览效果图:
h081514

代码

下面是PrintSample3.html模板的内容(以TestCase201Print对象为例):
里面的变量可以是$scope对象中的所有内容,因为会把$scope对象传入,当前的业务对象实例就是在$scope中的,所以下面的{{testCase201Print.creator}}就是取当前对象的属性内容(和写angluarjs表达式相同双括号的形式)。

  <table cellpadding="0" cellspacing="0" border="0" class="numberedList" width="572"> 
   <tbody>
    <tr id="eCE2" valignment="top" class=""> 
     <td alignment="right" class="dropCapQ" nowrap="" width="6"></td> 
     <td width="812"> 
      <table name="tiba" class="tiba" width="600" height="50"> 
       <tbody>
        <tr> 
         <td height="18">联系人:</td> 
         <td height="18">{{testCase201Print.creator}}</td> 
         <td height="18">编码描述:</td> 
         <td height="18">{{testCase201Print.codeDesc}}</td> 
        </tr> 
        <tr> 
         <td height="18">字典类型代码:</td> 
         <td height="18">{{testCase201Print.codeType}}</td> 
         <td height="18">接单日期:</td> 
         <td height="18">{{testCase201Print.orderDate}}</td> 
        </tr> 
       </tbody>
      </table> </td>
    </tr> 
   </tbody>
  </table>

3.常用扩展 3.常用扩展

3.1.LODOP打印配置说明 3.1.LODOP打印配置说明

生成出来的代码可以做两个层面的扩展。
1.第一可以通过代码生成出来的4个变量改变打印的起始位置(xxBsCtrl.js文件)
变量的取命名规则:$cope.方法名+业务对象名+(Top|Left|Width|Height)
在项目自定义的JS类中去重写变量值(xxCtrl.js文件)
h081516

this.scope.printSimpleTestCase201PrintTop =100;
this.scope.printSimpleTestCase201PrintLeft =0;

效果图:
h081517

2.第二种扩展就是可以对LODOP对象进一步内容设置:
扩展函数的命名规则:方法名+业务对象名+”PrintExt”

if($scope.printSimpleTestCase201PrintPrintExt){
     $scope.printSimpleTestCase201PrintPrintExt(LODOP);
}

3.下面也是在项目组扩展JS里面去扩展对象LODOP
h081519

this.scope.printSimpleTestCase201PrintPrintExt = function(LODOP){
//
}

函数里面的内容:参考LODOP官网说明

4.介绍base64模板的方法
1)首先去LODOP官网制作模板:
参考网址:http://www.lodop.net/demolist/PrintSample50.html
第一步打印设计模板
第二步生成base64编码字符串
h081520
下图就是设计器:对象类名我们规则为当前页面对象的属性名
注意:如保存按钮不出来把下面的元素位置移动一下就出来的
保存完后点生成模板,就会有一串64位编码过的字符串拷贝保存起来
h081521
下面就是生成出来的模板代码:
h081522

2)云平台代码解析:
需在扩展类中把上面的代码模板内容在自定义JS中进行变量赋值如下
Window.printBatch(这个就是方法定义里面的文件路径) =’’模板base64代码”
h081524

define(['angular', 'underscore', 'sample/test/testCase201NewTPrintEditBsCtrl',  'service/utils'],
function(angular, _, testCase201NewTPrintEditBsCtrl) {
    var Controller = inherit(function(options) {
        testCase201NewTPrintEditBsCtrl.call(this, options);
        this.scope.customThree = function() {
            alert("请配置方法实现");
        };

        window.printBatch = '@J0yHEH1QG1IBIS0APyMOGSISCGLAPt0XJ1OFGyECHS0APxyHEH1DLJ5yoSODIRj9ZN0XFIESGGR9BQZAPxyHEH0lCGRmBN0XFIESGGZ9ZwR2QDcWIRIAAQ04ZD0XFIESGGH9Zwt4QDcWIRIAAw04ZD0XQDcoHSWBGRITIS0APxyHEH1DLJ5yoSODIRj9ZN0XFIESGGR9AmtAPxyHEH0lCGp0QDcWIRIAZm03Zj0XFIESGGD9ZwZkQDcWIRIAAG02Aj0XFIESGGL9Zmx4QDbAPygDHx5KFHEHFS0APxyHEH1DLJ5yoSODIRj9AwL1QDcWIRIAZG03AD0XFIESGGV9ZwZ4QDcWIRIAZm0kZQNAPxyHEH00CGp1QDcWIRIAAG0lAQDAPxyHEH02CGp1QDbAPygDHx5VEHyUFSEqQDcWIRIAHTShMJkDHSEZCGLjZN0XFIESGGR9ZwNAPxyHEH0lCGZ1QDcWIRIAZm0lZN0XFIESGGD9ZwNAPxyHEH01CGZ1QDcWIRIAAw0lZN0XQDcoD0kOH1AWGxESJS0APxyHEH0kCGVAPxyHEH0lCGVAPxyHEH0mCGVAPxyHEH00CGVAPxyHEH01CGVAPxyHEH02CGVAPt0XJ0AioaEyoaEqQDcWIRIAHTShMJkDHSEZCGIioID1JGW3AJ82owIZqGV1JKSzAxyCBGIlrIH1AyZ2JQO4qycUBKp1JKSzAxyCBIteLGufG2IeqKIuI2teLJuiX1p4nvguo29yLJEpoaLeMIIhX2SWn09KH2cCHmy2X2IIpHR9CD0XFIESGGR9AIycLwIvqGL1GUR2QDcWIRIAZw01pUyOAIcQGmIZX3H1pSZ1AKOyZwMnMGNAPxyHEH0mCGIMnJV1LaH2AHkkAwIioHR1LxqyAGq1EGH3qHtAPxyHEH00CGIjrHR1JxACAHjeqGIjHmH1GUR2QDcWIRIAAG01pUyOAIcQGmIZX3H1pSZ1AHkkAwIioHR1LxqyAGq1EGH3qHtAPxyHEH02CGIMnJV1LaH2AKOyZwMnMGNAPt0XJ2y0MJ1hLJ1yKD0XFIESGGR9L3WyLKEipt0XFIESGGV9oTSmqR1iMTyzrIEcoJHAPxyHEH0mCJAlMJS0MH9zMzywMD0XFIESGGD9oTSmqR1iMTyzrJ9lQDcWIRIAAG1fLKA0GJ9xnJM5G2MznJAyQDcWIRIAAw1wpzIuqTIHnJ1yQDbAPygGqUyfMH5uoJImp10APxyHEH0kCJy0MJ1hLJ1yBj0XFIESGGV9nKEyoJ5uoJH7QDcWIRIAZm1cqTIgozSgMGfAPxyHEH00CJy0MJ1hLJ1yBj0XFIESGGH9nKEyoJ5uoJH7QDcWIRIAAw1cqTIgozSgMGfAPygWIRIAEH5RKD0X';

        this.scope.controlOneTestSysStBooking = function(aa, bb, cc) {
            alert('dfd');
        };
    },
    testCase201NewTPrintEditBsCtrl);
    var Proto = Controller.prototype;
    return Controller;
});

下面的window.printBatch就是和上面对应的

$scope.printSimpleTestCase201NewTPrintTop = 0;
$scope.printSimpleTestCase201NewTPrintLeft = 0;
$scope.printSimpleTestCase201NewTPrintWidth = “100 % ”;
$scope.printSimpleTestCase201NewTPrintHeight = “100 % ”;
/**
* TODO GLPaaS生成
* 打印1常用案例201新表格 TOOLBAR
*/
$scope.printSimpleTestCase201NewTPrint = function(type) {
    var param = {};
    LODOP = getLodop();
    LODOP.ADD_PRINT_DATA(“ProgramData”, window.printBatch);
    var allProperties = [“createOffice”, “principalGroupCode”, “codeWidth”, “orderDate”, “testCase201Id”, “lastModifyOffice”, “codeName”, “lastModifyTimeZone”, “codeDesc”, “typeId”, “isDeleted”, “recordVersion”, “creator”, “createTimeZone”, “createTime”, “codeType”, “lastModifyTime”, “active”, “lastModifyor”];;
    angular.forEach(allProperties,
    function(value, index) {
        if ($scope.testCase201NewTPrint[value]) {
            LODOP.SET_PRINT_STYLEA(value, “CONTENT”, $scope.testCase201NewTPrint[value]);
        } else {
            LODOP.SET_PRINT_STYLEA(value, “CONTENT”, “”);
        }
    });
    if ($scope.printSimpleTestCase201NewTPrintPrintExt) {
        $scope.printSimpleTestCase201NewTPrintPrintExt(LODOP);
    }
    if (type == ‘PRINT’) { //直接打印
        LODOP.PRINT();
    } else { 
        LODOP.PREVIEW();
    }
};

4.版本更新4.版本更新

5.5.0,2019.06.05

新特性

  • FR报表模式配置