lodop Lodop打印

Lodop 打印的基础实现，商用需要购买KEY。（同时感谢 lodop 为 ng-alain 免费提供正版KEY）

运行示例的前提条件必须安装Lodop。

  1. import { LodopModule } from '@delon/abc/lodop';

代码演示

lodop Lodop打印 - 图1

基础

获取打印服务器（包括：远程）信息。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { LodopService, Lodop } from '@delon/abc/lodop';
  5. @Component({
  6.   selector: 'components-lodop-print',
  7.   template: `
  8.     <nz-alert *ngIf="error" [nzType]="'warning'" [nzMessage]="message">
  9.       <ng-template #message>
  10.         请先下载<a href="http://c-lodop.com/download.html" target="_blank">Lodop插件</a>， 安装后点击<a (click)="reload()">重试</a>。
  11.       </ng-template>
  12.     </nz-alert>
  13.     <form *ngIf="!error" nz-form>
  14.       <nz-form-item nz-row>
  15.         <nz-form-label nz-col [nzSm]="6">打印服务器</nz-form-label>
  16.         <nz-form-control nz-col [nzSm]="18">
  17.           <nz-input-group>
  18.             <div nz-col [nzSpan]="16">
  19.               <input nz-input nzPlaceHolder="https://localhost:8443/CLodopfuncs.js" [(ngModel)]="cog.url" name="url" />
  20.             </div>
  21.             <div nz-col [nzSpan]="8">
  22.               <button nz-button (click)="reload(null)">重新加载打印机</button>
  23.             </div>
  24.           </nz-input-group>
  25.         </nz-form-control>
  26.       </nz-form-item>
  27.       <nz-form-item nz-row>
  28.         <nz-form-label nz-col [nzSm]="6">打印机</nz-form-label>
  29.         <nz-form-control nz-col [nzSm]="18">
  30.           <nz-select
  31.             style="width:90%;"
  32.             nzPlaceHolder="请选择打印机"
  33.             nzShowSearch
  34.             nzAllowClear
  35.             [(ngModel)]="cog.printer"
  36.             name="printer"
  37.             (ngModelChange)="changePinter($event)"
  38.           >
  39.             <nz-option *ngFor="let name of pinters" [nzLabel]="name" [nzValue]="name"> </nz-option>
  40.           </nz-select>
  41.         </nz-form-control>
  42.       </nz-form-item>
  43.       <nz-form-item nz-row>
  44.         <nz-form-label nz-col [nzSm]="6">纸张类型</nz-form-label>
  45.         <nz-form-control nz-col [nzSm]="18">
  46.           <nz-select style="width:90%;" nzPlaceHolder="请选择纸张类型" nzShowSearch nzAllowClear [(ngModel)]="cog.paper" name="paper">
  47.             <nz-option *ngFor="let name of papers" [nzLabel]="name" [nzValue]="name"> </nz-option>
  48.           </nz-select>
  49.         </nz-form-control>
  50.       </nz-form-item>
  51.       <nz-form-item nz-row>
  52.         <nz-form-label nz-col [nzSm]="6">打印内容</nz-form-label>
  53.         <nz-form-control nz-col [nzSm]="18" nzExtra="仅限HTML，更多类型支持请参考官网">
  54.           <textarea nz-input [(ngModel)]="cog.html" name="html" nzAutosize></textarea>
  55.         </nz-form-control>
  56.       </nz-form-item>
  57.       <nz-form-item nz-row>
  58.         <nz-form-control nz-col [nzSm]="18" [nzOffset]="6">
  59.           <button nz-button (click)="print(true)" [nzLoading]="printing">打印预览</button>
  60.           <button nz-button (click)="print()" [nzLoading]="printing">直接打印</button>
  61.         </nz-form-control>
  62.       </nz-form-item>
  63.     </form>
  64.   `,
  65. })
  66. export class ComponentsLodopPrintComponent {
  67.   cog: any = {
  68.     url: 'https://localhost:8443/CLodopfuncs.js',
  69.     printer: '',
  70.     paper: '',
  71.     html: `
  72.         <h1>Title</h1>
  73.         <p>这~！@#￥%……&*（）——sdilfjnvn</p>
  74.         <p>这~！@#￥%……&*（）——sdilfjnvn</p>
  75.         <p>这~！@#￥%……&*（）——sdilfjnvn</p>
  76.         <p>这~！@#￥%……&*（）——sdilfjnvn</p>
  77.         <p>这~！@#￥%……&*（）——sdilfjnvn</p>
  78.         `,
  79.   };
  80.   error = false;
  81.   lodop: Lodop | null = null;
  82.   pinters: any[] = [];
  83.   papers: string[] = [];
  84.   constructor(public lodopSrv: LodopService, private msg: NzMessageService) {
  85.     this.lodopSrv.lodop.subscribe(({ lodop, ok }) => {
  86.       if (!ok) {
  87.         this.error = true;
  88.         return;
  89.       }
  90.       this.error = false;
  91.       this.msg.success(`打印机加载成功`);
  92.       this.lodop = lodop as Lodop;
  93.       this.pinters = this.lodopSrv.printer;
  94.     });
  95.   }
  97.   reload(options: any = { url: 'https://localhost:8443/CLodopfuncs.js' }) {
  98.     this.pinters = [];
  99.     this.papers = [];
  100.     this.cog.printer = '';
  101.     this.cog.paper = '';
  103.     this.lodopSrv.cog = Object.assign({}, this.cog, options);
  104.     this.error = false;
  105.     if (options === null) this.lodopSrv.reset();
  106.   }
  108.   changePinter(name: string) {
  109.     this.papers = this.lodop!.GET_PAGESIZES_LIST(name, '\n').split('\n');
  110.   }
  112.   printing = false;
  113.   print(isPrivew = false) {
  114.     const LODOP = this.lodop!;
  115.     LODOP.PRINT_INITA(10, 20, 810, 610, '测试C-Lodop远程打印四步骤');
  116.     LODOP.SET_PRINTER_INDEXA(this.cog.printer);
  117.     LODOP.SET_PRINT_PAGESIZE(0, 0, 0, this.cog.paper);
  118.     LODOP.ADD_PRINT_TEXT(1, 1, 300, 200, '下面输出的是本页源代码及其展现效果：');
  119.     LODOP.ADD_PRINT_TEXT(20, 10, '90%', '95%', this.cog.html);
  120.     LODOP.SET_PRINT_STYLEA(0, 'ItemType', 4);
  121.     LODOP.NewPageA();
  122.     LODOP.ADD_PRINT_HTM(20, 10, '90%', '95%', this.cog.html);
  123.     if (isPrivew) LODOP.PREVIEW();
  124.     else LODOP.PRINT();
  125.   }
  126. }

lodop Lodop打印 - 图2

打印设计

使用打印设计对字体、字号、对象排版等，并利用 attachCode 方法自动附加设计生成的代码至 Lodop 对象，且支持动态参数。调用 print 方法来打印数据并通过监听 events 判断进行下一个打印，从而实现无限制批量套打。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { LodopService, Lodop } from '@delon/abc/lodop';
  5. @Component({
  6.   selector: 'components-lodop-design',
  7.   template: `
  8.   <nz-alert *ngIf="error" [nzType]="'warning'" [nzMessage]="message">
  9.     <ng-template #message>
  10.       请先下载<a href="http://c-lodop.com/download.html" target="_blank">Lodop插件</a>。
  11.     </ng-template>
  12.   </nz-alert>
  13.   <form *ngIf="lodop && !error" nz-form>
  14.     <nz-form-item nz-row>
  15.       <nz-form-label nz-col [nzSm]="6">标题</nz-form-label>
  16.       <nz-form-control nz-col [nzSm]="18">
  17.         <input nz-input [(ngModel)]="context['标题']" name="标题">
  18.       </nz-form-control>
  19.     </nz-form-item>
  20.     <nz-form-item nz-row>
  21.       <nz-form-label nz-col [nzSm]="6">费用</nz-form-label>
  22.       <nz-form-control nz-col [nzSm]="18">
  23.         <input nz-input [(ngModel)]="context['费用']" name="费用">
  24.       </nz-form-control>
  25.     </nz-form-item>
  26.     <nz-form-item nz-row>
  27.       <nz-form-label nz-col [nzSm]="6">打印内容</nz-form-label>
  28.       <nz-form-control nz-col [nzSm]="18">
  29.         <textarea [(ngModel)]="code" name="code" nz-input [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
  30.       </nz-form-control>
  31.     </nz-form-item>
  32.     <nz-form-item nz-row>
  33.       <nz-form-control nz-col [nzSm]="18" [nzOffset]="6">
  34.         <button nz-button (click)="design()" [nzLoading]="doing">打印设计</button>
  35.         <button nz-button (click)="setup()">打印维护</button>
  36.         <button nz-button (click)="print()">打印预览</button>
  37.         <button nz-button (click)="printBatch()" [nzLoading]="doing">批量打印3张</button>
  38.       </nz-form-control>
  39.     </nz-form-item>
  40.   </form>
  41.   `
  42. })
  43. export class ComponentsLodopDesignComponent {
  44.   doing = false;
  45.   error = false;
  46.   lodop: Lodop | null = null;
  47.   context: any = {
  48.     标题: '自定义标题',
  49.     费用: '100.00 元'
  50.   };
  51.   code = `LODOP.PRINT_INITA(10,10,762,533,"测试套打");
  52. LODOP.ADD_PRINT_TEXT(38,78,408,30,"{{标题}}");
  53. LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
  54. LODOP.SET_PRINT_STYLEA(0,"FontColor","#800000");
  55. LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
  56. LODOP.ADD_PRINT_TEXT(259,579,100,23,"{{费用}}");
  57. LODOP.ADD_PRINT_TEXT(260,520,58,24,"合计：");`;
  58.   constructor(public lodopSrv: LodopService, private msg: NzMessageService) {
  59.     this.lodopSrv.lodop.subscribe(({ lodop, ok }) => {
  60.       if (!ok) {
  61.         this.error = true;
  62.         return;
  63.       }
  64.       this.error = false;
  65.       this.lodop = lodop as Lodop;
  66.     });
  67.   }
  69.   design() {
  70.     this.lodopSrv.attachCode(this.code);
  71.     this.doing = true;
  72.     this.lodopSrv.design().then((code) => {
  73.       this.code = code;
  74.       this.doing = false;
  75.     });
  76.   }
  78.   setup() {
  79.     this.lodopSrv.attachCode(this.code);
  80.     this.lodop!.PRINT_SETUP();
  81.   }
  83.   print() {
  84.     this.lodopSrv.attachCode(this.code, this.context);
  85.     this.lodop!.PREVIEW();
  86.   }
  88.   printBatch() {
  89.     this.doing = true;
  90.     const data = new Array(3).fill({}).map((_item, index) => Object.assign({ index: index + 1 }, this.context));
  91.     this.lodopSrv.print(this.code + `
  92.     LODOP.ADD_PRINT_TEXT(10,10,100,100,"第{{index}}张");
  93.     `, data);
  94.     const batch$ = this.lodopSrv.events.subscribe((res) => {
  95.       console.log('finish', res);
  96.       if (res.item.index === data.length - 1) {
  97.         this.msg.success(`全部打印完成`);
  98.         this.doing = false;
  99.         batch$.unsubscribe();
  100.       }
  101.     });
  102.   }
  104. }

API

LodopService

成员说明类型默认值
cog获取或设置配置项AlainLodopConfig-
events打印过程通知Observable<LodopPrintResult>-
lodop获取 Lodop 对象Observable<LodopResult>-

Lodop加载成功后辅助API

成员说明类型默认值
printer获取打印机列表string[]-
attachCode()附加代码至 lodop 对象上void-
design()运行打印设计手动关闭后返回代码Promise<string>-
print()立即打印，一般用于批量套打void-

LodopPrintResult

成员说明类型默认值
ok是否打印成功boolean-
error错误信息string-
code代码string-
item动态参数上下文对象any-
parser代码解析表达式RegExp-

LodopResult

成员说明类型默认值
ok表示是否加载成功boolean-
status状态码string-
lodopLodop 对象Lodop-
error错误明细any-

AlainLodopConfig

成员说明类型默认值全局配置
companyName注册单位名称string-✅
license主注册号string-✅
licenseA附加注册号Astring-✅
licenseB附加注册号Bstring-✅
urlLodop 远程脚本URL地址，注意务必使用 name 属性指定变量值string//localhost:8443/Lodopfuncs.js✅
nameLodop 变量名stringLODOP✅
checkMaxCount检查次数，默认 100，当检查超过时视为异常，这是因为 Lodop 需要连接 WebSocketnumber100✅