快捷導(dǎo)航

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

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

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

前言

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

場景

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

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

后天api請求都需要帶上token信息

前臺(tái)頁面跳轉(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');
  }
 });
 }

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

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

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

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

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

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

 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ì)再瀏覽器中打開 實(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);
 }