前言
場景在頁面顯示的時候是分頁現實的,當前頁面只有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...