Lodop打印
IMPORT MODULE

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

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

代码演示

请选择打印机
请选择纸张类型
仅限HTML,更多类型支持请参考官网
基础

获取打印服务器(包括:远程)信息。

expand codeexpand code
import { Component } from '@angular/core';
import { Lodop, LodopService } from '@delon/abc/lodop';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'components-lodop-print',
  template: `
    <nz-alert *ngIf="error" [nzType]="'warning'" [nzMessage]="message">
      <ng-template #message>
        请先下载<a href="http://c-lodop.com/download.html" target="_blank">Lodop插件</a>, 安装后点击<a (click)="reload()">重试</a>。
      </ng-template>
    </nz-alert>
    <form *ngIf="!error" nz-form>
      <nz-form-item nz-row>
        <nz-form-label nz-col [nzSm]="6">打印服务器</nz-form-label>
        <nz-form-control nz-col [nzSm]="18">
          <nz-input-group>
            <div nz-col [nzSpan]="16">
              <input nz-input nzPlaceHolder="https://localhost:8443/CLodopfuncs.js" [(ngModel)]="cog.url" name="url" />
            </div>
            <div nz-col [nzSpan]="8">
              <button nz-button (click)="reload(null)">重新加载打印机</button>
            </div>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-label nz-col [nzSm]="6">打印机</nz-form-label>
        <nz-form-control nz-col [nzSm]="18">
          <nz-select
            style="width:90%;"
            nzPlaceHolder="请选择打印机"
            nzShowSearch
            nzAllowClear
            [(ngModel)]="cog.printer"
            name="printer"
            (ngModelChange)="changePinter($event)"
          >
            <nz-option *ngFor="let name of pinters" [nzLabel]="name" [nzValue]="name"> </nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-label nz-col [nzSm]="6">纸张类型</nz-form-label>
        <nz-form-control nz-col [nzSm]="18">
          <nz-select style="width:90%;" nzPlaceHolder="请选择纸张类型" nzShowSearch nzAllowClear [(ngModel)]="cog.paper" name="paper">
            <nz-option *ngFor="let name of papers" [nzLabel]="name" [nzValue]="name"> </nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-label nz-col [nzSm]="6">打印内容</nz-form-label>
        <nz-form-control nz-col [nzSm]="18" nzExtra="仅限HTML,更多类型支持请参考官网">
          <textarea nz-input [(ngModel)]="cog.html" name="html" nzAutosize></textarea>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-control nz-col [nzSm]="18" [nzOffset]="6">
          <button nz-button (click)="print(true)" [nzLoading]="printing">打印预览</button>
          <button nz-button (click)="print()" [nzLoading]="printing">直接打印</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  `,
})
export class ComponentsLodopPrintComponent {
  constructor(private lodopSrv: LodopService, private msg: NzMessageService) {
    this.lodopSrv.lodop.subscribe(({ lodop, ok }) => {
      if (!ok) {
        this.error = true;
        return;
      }
      this.error = false;
      this.msg.success(`打印机加载成功`);
      this.lodop = lodop as Lodop;
      this.pinters = this.lodopSrv.printer;
    });
  }
  cog: any = {
    url: 'https://localhost:8443/CLodopfuncs.js',
    printer: '',
    paper: '',
    html: `
        <h1>Title</h1>
        <p>这~!@#¥%……&*()——sdilfjnvn</p>
        <p>这~!@#¥%……&*()——sdilfjnvn</p>
        <p>这~!@#¥%……&*()——sdilfjnvn</p>
        <p>这~!@#¥%……&*()——sdilfjnvn</p>
        <p>这~!@#¥%……&*()——sdilfjnvn</p>
        `,
  };
  error = false;
  lodop: Lodop | null = null;
  pinters: any[] = [];
  papers: string[] = [];

  printing = false;

  reload(options: any = { url: 'https://localhost:8443/CLodopfuncs.js' }): void {
    this.pinters = [];
    this.papers = [];
    this.cog.printer = '';
    this.cog.paper = '';

    this.lodopSrv.cog = { ...this.cog, ...options };
    this.error = false;
    if (options === null) this.lodopSrv.reset();
  }

  changePinter(name: string): void {
    this.papers = this.lodop!.GET_PAGESIZES_LIST(name, '\n').split('\n');
  }
  print(isPrivew: boolean = false): void {
    const LODOP = this.lodop!;
    LODOP.PRINT_INITA(10, 20, 810, 610, '测试C-Lodop远程打印四步骤');
    LODOP.SET_PRINTER_INDEXA(this.cog.printer);
    LODOP.SET_PRINT_PAGESIZE(0, 0, 0, this.cog.paper);
    LODOP.ADD_PRINT_TEXT(1, 1, 300, 200, '下面输出的是本页源代码及其展现效果:');
    LODOP.ADD_PRINT_TEXT(20, 10, '90%', '95%', this.cog.html);
    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 4);
    LODOP.NewPageA();
    LODOP.ADD_PRINT_HTM(20, 10, '90%', '95%', this.cog.html);
    if (isPrivew) LODOP.PREVIEW();
    else LODOP.PRINT();
  }
}
打印设计

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

expand codeexpand code
import { Component } from '@angular/core';
import { Lodop, LodopService } from '@delon/abc/lodop';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'components-lodop-design',
  template: `
    <nz-alert *ngIf="error" [nzType]="'warning'" [nzMessage]="message">
      <ng-template #message> 请先下载<a href="http://c-lodop.com/download.html" target="_blank">Lodop插件</a>。 </ng-template>
    </nz-alert>
    <form *ngIf="lodop && !error" nz-form>
      <nz-form-item nz-row>
        <nz-form-label nz-col [nzSm]="6">标题</nz-form-label>
        <nz-form-control nz-col [nzSm]="18">
          <input nz-input [(ngModel)]="context['标题']" name="标题" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-label nz-col [nzSm]="6">费用</nz-form-label>
        <nz-form-control nz-col [nzSm]="18">
          <input nz-input [(ngModel)]="context['费用']" name="费用" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-label nz-col [nzSm]="6">打印内容</nz-form-label>
        <nz-form-control nz-col [nzSm]="18">
          <textarea [(ngModel)]="code" name="code" nz-input [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-row>
        <nz-form-control nz-col [nzSm]="18" [nzOffset]="6">
          <button nz-button (click)="design()" [nzLoading]="doing">打印设计</button>
          <button nz-button (click)="setup()">打印维护</button>
          <button nz-button (click)="print()">打印预览</button>
          <button nz-button (click)="printBatch()" [nzLoading]="doing">批量打印3张</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  `,
})
export class ComponentsLodopDesignComponent {
  doing = false;
  error = false;
  lodop: Lodop | null = null;
  context: { 标题: string; 费用: string } = {
    标题: '自定义标题',
    费用: '100.00 元',
  };
  code = `LODOP.PRINT_INITA(10,10,762,533,"测试套打");
LODOP.ADD_PRINT_TEXT(38,78,408,30,"{{标题}}");
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.SET_PRINT_STYLEA(0,"FontColor","#800000");
LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
LODOP.ADD_PRINT_TEXT(259,579,100,23,"{{费用}}");
LODOP.ADD_PRINT_TEXT(260,520,58,24,"合计:");`;
  constructor(private lodopSrv: LodopService, private msg: NzMessageService) {
    this.lodopSrv.lodop.subscribe(({ lodop, ok }) => {
      if (!ok) {
        this.error = true;
        return;
      }
      this.error = false;
      this.lodop = lodop as Lodop;
    });
  }

  design(): void {
    this.lodopSrv.attachCode(this.code);
    this.doing = true;
    this.lodopSrv.design().then(code => {
      this.code = code;
      this.doing = false;
    });
  }

  setup(): void {
    this.lodopSrv.attachCode(this.code);
    this.lodop!.PRINT_SETUP();
  }

  print(): void {
    this.lodopSrv.attachCode(this.code, this.context);
    this.lodop!.PREVIEW();
  }

  printBatch(): void {
    this.doing = true;
    const data = new Array(3).fill({}).map((_, index) => ({ index: index + 1, ...this.context }));
    this.lodopSrv.print(
      this.code +
        `
    LODOP.ADD_PRINT_TEXT(10,10,100,100,"第{{index}}张");
    `,
      data,
    );
    const batch$ = this.lodopSrv.events.subscribe(res => {
      console.log('finish', res);
      if (res.item.index === data.length - 1) {
        this.msg.success(`全部打印完成`);
        this.doing = false;
        batch$.unsubscribe();
      }
    });
  }
}

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