您好,登錄后才能下訂單哦!
前言
本文主要介紹了關(guān)于angular實現(xiàn)頁面打印局部功能的相關(guān)內(nèi)容,分享出來供大家參考,下面話不多說了,來一起看看詳細(xì)的介紹吧。
場景
在頁面顯示的時候是分頁現(xiàn)實的,當(dāng)前頁面只有10條數(shù)據(jù),但是打印需要打印完整的100條數(shù)據(jù)。
并且在當(dāng)前頁面包含了表格之外的標(biāo)題,菜單等其他元素。
后天api請求都需要帶上token信息
前臺頁面跳轉(zhuǎn)到打印頁面后再跳回
1、通過緩存?zhèn)鬟f數(shù)據(jù),
2、路由跳轉(zhuǎn)到打印頁面,
3、頁面獲取緩存數(shù)據(jù),
4、調(diào)用瀏覽器打印方法,
5、操作完畢頁面后退一步
調(diào)用打印頁面
this.cach.setBylocal({key: key, value: data}); // 寫入緩存 this.router.navigate([url, key]); // 路由跳轉(zhuǎn),緩存key值傳遞過去
打印頁面
ngAfterViewInit() { const $qus = this.route.params.subscribe(q => { const key = q.key; if (key) { this._data = this.cach.getBylocal(key) ; this.cach.removeBylocal(key); setTimeout(() => { window.print(); history.go(-1); }, '20'); } }); }
在打印頁面里自動處理了分頁顯示等問題。測試一頁A4紙適合頁面840px-1225px
打印文件里會自動添加頁面標(biāo)題和日期,下方會自動添加頁面地址,不知道如何去掉
在后臺生成pdf頁面顯示自帶打印下載功能
1、后臺生成PDF文件,返回二進(jìn)制流。
2、在不需要token信息的情況下,并且支持get請求的,可以在瀏覽器中直接打開該地址。或者通過a標(biāo)簽來實現(xiàn)下載和頁面顯示。并實現(xiàn)打印功能。
3、需要token驗證的情況下,使用blob類型來接收數(shù)據(jù),并創(chuàng)建一個本地地址供瀏覽器訪問,后面操作如第二步。
private down(url: string, body?: any) { return this.http.post(url, body || null, { responseType: 'blob' }) } private downLoad(url: string, type: string, body?: any, fileName?: string) { return this.down(url, body).map(r => { const blob = new Blob([r], {type: type}); 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) { a.setAttribute('download', fileName); } else { a.setAttribute('target', '_blank'); } a.click(); URL.revokeObjectURL(objectUrl); return true; }); } /** * 下載pdf, 如果不傳入文件名會再瀏覽器中打開 實現(xiàn)打印功能 * 傳入文件名會直接下載 * @param {string} url * @param body * @param {string} fileName * @returns {Observable<boolean>} */ downLoadPdf(url: string, body?: any, fileName?: string) { return this.downLoad(url, 'application/pdf', body, fileName); }
在iframe頁面里調(diào)用打印
這個方法可以結(jié)合前兩個方法使用,把前兩個頁面放在在iframe頁面里。
略。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。