angular print function implementation

There are mainstream front-end printing ways: one is to use the browser print functionality directly printed page, and the other is to call the local controls to achieve. Browser print single function, does not apply to complex business forms, and print control print templates can be designed to achieve complex forms printing, very suitable for complex business systems.

Here we will introduce angular in both print.

1, browser print:

This way is very simple in angular, get the html element, the pop-up window Print, Print Finish to close the window, in three steps.

  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, plug-in print:

There are many web print plug-in, you can select the appropriate print control based on demand. Here we recommend that lodop controls, and powerful, the key is free.

Lodop first need to be translated into the js ts and added to the project;

Then you need to add lodop print services, print services including printing, batch printing, design, reset and other methods, which are achieved by calling a local lodop control. So there is no complex business services, only some judgment calls and local services.

Realization Printing:

Get a list of all current business printing templates, select a template and print

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

According to the template query template content selection, then filled print preview print template.

As business systems Universal Print web design is very complicated, it's just the idea angular implement two methods of printing, if in doubt can be raised, so, I'll answer it for everyone.