angular打印功能实现方式

时间：2024-03-06 20:16:06

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

下面为大家介绍angular中的这两种打印。

1、浏览器打印：

这种方式在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();
  }

2、插件打印：

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实现两种打印的方法思路，如果有疑问的可以提出，有空我会为大家一一解答。

相关文章