angular頁面打印局部功能實(shí)現(xiàn)方法思考
0.5872018.04.09 20:21:11字?jǐn)?shù) 422閱讀 1,883
場景
在頁面顯示的時候是分頁現(xiàn)實(shí)的，當(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=>{constkey=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)簽來實(shí)現(xiàn)下載和頁面顯示。并實(shí)現(xiàn)打印功能。
3、需要token驗證的情況下，使用blob類型來接收數(shù)據(jù)，并創(chuàng)建一個本地地址供瀏覽器訪問，后面操作如第二步。
privatedown(url:string,body?:any){returnthis.http.post(url,body||null,{responseType:'blob'})}privatedownLoad(url:string,type:string,body?:any,fileName?:string){returnthis.down(url,body).map(r=>{constblob=newBlob([r],{type:type});constobjectUrl=URL.createObjectURL(blob);consta=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);returntrue;});}/**
? *? 下載pdf， 如果不傳入文件名會再瀏覽器中打開 實(shí)現(xiàn)打印功能
? *? 傳入文件名會直接下載
? * @param {string} url
? * @param body
? * @param {string} fileName
? * @returns {Observable<boolean>}
? */downLoadPdf(url:string,body?:any,fileName?:string){returnthis.downLoad(url,'application/pdf',body,fileName);}
效果
在iframe頁面里調(diào)用打印
這個方法可以結(jié)合前兩個方法使用，把前兩個頁面放在在iframe頁面里。
略。
