angular打印功能實現方式

目前主流的前端打印方式有兩種：一種是使用瀏覽器打印功能直接打印頁面，另一種是調用本地控件實現。瀏覽器打印功能單一，不適用於復雜的業務表單，而打印控件可以設計打印模板，實現復雜表單的打印，十分適合復雜的業務系統。

下面為大家介紹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實現兩種打印的方法思路，如果有疑問的可以提出，有空我會為大家一一解答。