快捷導(dǎo)航

angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法

更新時(shí)間：2018年04月13日 10:28:27 作者：易兒善

這篇文章主要給大家介紹了關(guān)于angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文主要介紹了關(guān)于angular實(shí)現(xiàn)頁(yè)面打印局部功能的相關(guān)內(nèi)容，分享出來(lái)供大家參考，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

場(chǎng)景

在頁(yè)面顯示的時(shí)候是分頁(yè)現(xiàn)實(shí)的，當(dāng)前頁(yè)面只有10條數(shù)據(jù)，但是打印需要打印完整的100條數(shù)據(jù)。

并且在當(dāng)前頁(yè)面包含了表格之外的標(biāo)題，菜單等其他元素。

后天api請(qǐng)求都需要帶上token信息

前臺(tái)頁(yè)面跳轉(zhuǎn)到打印頁(yè)面后再跳回

1、通過(guò)緩存?zhèn)鬟f數(shù)據(jù)，

2、路由跳轉(zhuǎn)到打印頁(yè)面，

3、頁(yè)面獲取緩存數(shù)據(jù)，

4、調(diào)用瀏覽器打印方法，

5、操作完畢頁(yè)面后退一步

調(diào)用打印頁(yè)面

 this.cach.setBylocal({key: key, value: data}); // 寫(xiě)入緩存
 this.router.navigate([url, key]); // 路由跳轉(zhuǎn)，緩存key值傳遞過(guò)去

打印頁(yè)面

 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');
  }
 });
 }

在打印頁(yè)面里自動(dòng)處理了分頁(yè)顯示等問(wèn)題。測(cè)試一頁(yè)A4紙適合頁(yè)面840px-1225px

打印文件里會(huì)自動(dòng)添加頁(yè)面標(biāo)題和日期，下方會(huì)自動(dòng)添加頁(yè)面地址，不知道如何去掉

在后臺(tái)生成pdf頁(yè)面顯示自帶打印下載功能

1、后臺(tái)生成PDF文件，返回二進(jìn)制流。

2、在不需要token信息的情況下，并且支持get請(qǐng)求的，可以在瀏覽器中直接打開(kāi)該地址?；蛘咄ㄟ^(guò)a標(biāo)簽來(lái)實(shí)現(xiàn)下載和頁(yè)面顯示。并實(shí)現(xiàn)打印功能。

3、需要token驗(yàn)證的情況下，使用blob類型來(lái)接收數(shù)據(jù)，并創(chuàng)建一個(gè)本地地址供瀏覽器訪問(wèn)，后面操作如第二步。

 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， 如果不傳入文件名會(huì)再瀏覽器中打開(kāi) 實(shí)現(xiàn)打印功能
 * 傳入文件名會(huì)直接下載
 * @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);
 }