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實現兩種打印的方法思路，若是有疑問的能夠提出，有空我會爲你們一一解答。