angular列印功能實現方式

2022-01-15 00:57:21 字數 669 閱讀 8411

目前主流的前端列印方式有兩種:一種是使用瀏覽器列印功能直接列印頁面,另一種是呼叫本地控制項實現。瀏覽器列印功能單一,不適用於複雜的業務表單,而列印控制項可以設計列印模板,實現複雜表單的列印,十分適合複雜的業務系統。

下面為大家介紹angular中的這兩種列印。

1、瀏覽器列印:

這種方式在angular中十分簡單,獲取html元素,彈出列印視窗,列印完成關閉視窗,三步完成。

browserprint()
2、外掛程式列印:

web列印外掛程式有很多種,可以根據需求選擇合適列印控制項。這裡給大家推薦的是lodop控制項,功能強大,關鍵是免費。

首先需要將lodop的js翻譯成ts並新增到專案中;

然後需要新增lodop列印服務,列印服務中包括列印、批量列印、設計、重置等方法,這些均通過呼叫本地lodop控制項實現。所以服務中沒有複雜的業務,只有一些判斷和本地服務的呼叫。

實現套打:

獲取當前業務的所有列印模板列表,選擇模板並列印

templateprint(input: string): void

) }

根據選擇的模板查詢模板內容,然後填充列印模板進行預覽列印。

由於業務系統中的web通用列印設計十分複雜,這裡僅提供angular實現兩種列印的方法思路,如果有疑問的可以提出,有空我會為大家一一解答。

angular實現頁面列印區域性功能的思考與方法

前言 場景在頁面顯示的時候是分頁現實的,當前頁面只有10條資料,但是列印需要列印完整的100條資料。並且在當前頁面包含了 之外的標題,選單等其他元素。後天api請求都需要帶上token資訊 前台頁面跳轉到列印頁面後再跳回 1 通過快取傳遞資料,2 路由跳轉到列印頁面,3 頁面獲取快取資料,4 呼叫瀏...

VC實現列印功能

http yesky.com 13 1700013.shtml列印api http bloghome.cn topics vc 4 22.htm列印api 設定紙張大小 if printdlg pd return false assert pd.hdc null 設定紙張大小daiguopeng,d...

MFC實現列印功能

使用cprintdialog類的建構函式 cprintdialog bool bprintsetuponly,true for print setup,false for print dialog dword dwflags pd allpages pd usedevmodecopies pd no...