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