angular打印功能实现方式

目前主流的前端打印方式有两种：一种是使用浏览器打印功能直接打印页面，另外一种是调用本地控件实现。浏览器打印功能单一，不适用于复杂的业务表单，而打印控件能够设计打印模板，实现复杂表单的打印，十分适合复杂的业务系统。

下面为你们介绍angular中的这两种打印。

一、浏览器打印：

这种方式在angular中十分简单，获取html元素，弹出打印窗口，打印完成关闭窗口，三步完成。

  browserPrint(){
    const printContent = document.getElementById("report");
    const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
    WindowPrt.document.write(printContent.innerHTML);
    WindowPrt.document.close();
    WindowPrt.focus();
    WindowPrt.print();
    WindowPrt.close();
  }

二、插件打印：

web打印插件有不少种，能够根据需求选择合适打印控件。这里给你们推荐的是lodop控件，功能强大，关键是免费。

首先须要将lodop的js翻译成ts并添加到项目中；

而后须要添加lodop打印服务，打印服务中包括打印、批量打印、设计、重置等方法，这些均经过调用本地lodop控件实现。因此服务中没有复杂的业务，只有一些判断和本地服务的调用。

实现套打：

获取当前业务的全部打印模板列表，选择模板并打印

  templatePrint(input: string): void {
    this._Service.print(input).subscribe(result => {
      this.lodopService.attachCode(result, this.data);
      this.lodop!.PREVIEW();
    })
  }

根据选择的模板查询模板内容，而后填充打印模板进行预览打印。

因为业务系统中的web通用打印设计十分复杂，这里仅提供angular实现两种打印的方法思路，若是有疑问的能够提出，有空我会为你们一一解答。