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

2022-10-06 05:36:10 字數 1544 閱讀 8808

前言

場景在頁面顯示的時候是分頁現實的,當前頁面只有10條資料,但是列印需要列印完整的100條資料。

並且在當前頁面包含了**之外的標題,選單等其他元素。

後天api請求都需要帶上token資訊

前台頁面跳轉到列印頁面後再跳回

1、通過快取傳遞資料,

2、路由跳轉到列印頁面,

3、頁面獲取快取資料,

4、呼叫瀏覽器列印方法,

5、操作完畢頁面後退一步

呼叫列印頁面

this.cach.setbylocal(); // 寫入快取

this.router.n**igate([url, key]); // 路由跳轉,快取key值傳遞過去

列印頁面

ngafterviewinit() , '20');

} });

}在列印頁面裡自動處理了分頁顯示等問題。測試一頁a4紙適合頁面840px-1225px

列印檔案裡會自動新增頁面標題和日期,下方會自動新增頁面位址,不知道如何去掉

在程式設計客棧後台生成pdf頁面顯示自帶列印**功能

1、後台生成pdf檔案,返回二進位製流。

2、在不需要token資訊的情況下,並且支援get請求的,可以在瀏覽器中直接開啟該位址。或者通過a標籤來實現**和程式設計客棧頁面顯示。並實現列印功能。

3、需要token驗證的情況下,使用blob型別來接收數程式設計客棧據,並建立乙個本地位址供瀏覽器訪問,後面操作如第二步。

private down(url: string, body?: any) )

} private download(url: string, type: string, body?: any, filename?: string) );

const objecturl = url.createobjecturl(blob);

const a = document.createelement('a');

document.body.appendchild(a);

a.setattribute('style', 'display:none');

a.setattribute('href', objecturl);

if (filename) else

a.click();

url.revokeobjecturl(objecturl);

return true;

});} /**

* **pdf, 如果不傳入檔名會再瀏覽器中開啟 實現列印功能

* 傳入檔名會直接**

* @param url

* @param body

* @param filename

* @returns

*/ downloadpdf(url: string, body?: any, filename?: string)

在iframe頁面裡呼叫列印

這個方法可以結合前兩個方法使用,把前兩個頁面放在在iframe頁面裡。

略。總結

本文標題: angular實現頁面列印區域性功能的思考與方法

本文位址:

angular列印功能實現方式

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

iframe實現區域性列印

網頁中用到jquery.dialog,需要把dialog裡面的內容列印出來,開始直接用window.print 因為我電腦沒有連印表機,也沒有測試,在專案演示的時候乙個同事就列印出來,看效果,太囧了,列印出來的不是div裡面的內容,而是當前螢幕所能看到的內容。在網上查了很多資料,有的看不懂,有的嘗試...

用實現頁面區域性重新整理

jsp頁面部分 maxlength 5 style ime mode active readonly 由按鈕方法提交到action頁面 mastercltslevent mastercltslevent mastercltslevent createevent gtconst.file vtsw,m...