angular实现页面打印局部功能的思考与方法

前言

本文主要介绍了关于angular实现页面打印局部功能的相关内容，分享出来供大家参考，下面话不多说了，来一起看看详细的介绍吧。

场景

在页面显示的时候是分页现实的，当前页面只有10条数据，但是打印需要打印完整的100条数据。

并且在当前页面包含了表格之外的标题，菜单等其他元素。

后天api请求都需要带上token信息

前台页面跳转到打印页面后再跳回

1、通过缓存传递数据，

2、路由跳转到打印页面，

3、页面获取缓存数据，

4、调用浏览器打印方法，

5、操作完毕页面后退一步

调用打印页面

 this.cach.setBylocal({key: key, value: data}); // 写入缓存
 this.router.navigate([url, key]); // 路由跳转，缓存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

打印文件里会自动添加页面标题和日期，下方会自动添加页面地址，不知道如何去掉

在后台生成pdf页面显示自带打印下载功能

1、后台生成PDF文件，返回二进制流。

2、在不需要token信息的情况下，并且支持get请求的，可以在浏览器中直接打开该地址。或者通过a标签来实现下载和页面显示。并实现打印功能。

3、需要token验证的情况下，使用blob类型来接收数据，并创建一个本地地址供浏览器访问，后面操作如第二步。

 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， 如果不传入文件名会再浏览器中打开 实现打印功能
 * 传入文件名会直接下载
 * @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页面里调用打印

这个方法可以结合前两个方法使用，把前两个页面放在在iframe页面里。

略。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • angular实现页面打印局部功能的思考与方法

    angular实现页面打印局部功能的思考与方法

    前言 本文主要介绍了关于angular实现页面打印局部功能的相关内容,分享出来供大家参考,下面话不多说了,来一起看看详细的介绍吧. 场景 在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据. 并且在当前页面包含了表格之外的标题,菜单等其他元素. 后天api请求都需要带上token信息 前台页面跳转到打印页面后再跳回 1.通过缓存传递数据, 2.路由跳转到打印页面, 3.页面获取缓存数据, 4.调用浏览器打印方法, 5.操作完毕页面后退一步 调用打印页面 th

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • Angular在一个页面中使用两个ng-app的方法

    下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title> </head> <b

  • js或jquery实现页面打印可局部打印

    js或jquery实现页面打印(局部打印) 1.js实现(可实现局部打印) 复制代码 代码如下: <html> <title>js打印</title> <head></head><body> <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();&quo

  • vue-print-nb实现页面打印功能实例(含分页打印)

    目录 安装 引用 API 示例代码 补充:vue-print-nb插件的一些优化 总结 Web 实现页面打印 安装 官网地址:https://github.com/Power-kxLee/vue3-print-nb // 安装 打印组件 npm install vue-print-nb --save 引用 vue2引用 import Print from 'vue-print-nb' // 全局引用 Vue.use(Print); // 或者 // 单组件引用 import print from

  • JS实现页面打印（整体、局部）

    我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 <a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a> 现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置 局部

  • JS打印组合功能

    本文为大家分享了JS打印组合功能,功能全面,供大家参考,具体内容如下 1.局部打印--即想打印什么地方就打印什么地方  解决办法:  将不想打印的地方隐藏起来  <style type="text/css" media=print> .noprint{display : none } 分页的时候用  .PageNext{page-break-after: always;}  然后给不想打印的页面元素添加: class="Noprint" ,那就不会出现在

  • 动态创建Angular组件实现popup弹窗功能

    起步: 直接使用ngIf 把弹窗的DOM直接放在页面底下隐藏,通过ngIf这样的指令控制其显示. 改进: 封装成angular模块,通过服务控制其显示 直接使用ngIf的话,让人不爽的地方就在于不够通用,每个页面都得加DOM.改进的话可以把比较通用的一些DOM封装成组件,统一添加到全局页面中,并将显示的控制交给一个angular服务来控制其显示. 比如定义了两个组件(DialogComponent, AlertComponent),将他们都添加到AppComponent下,然后提供一个Popup

  • electron + vue项目实现打印小票功能及实现代码

    一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备

  • 在Winform程序中使用Spire.Pdf实现页面添加印章功能的实现

    在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下.这样的处理,如果文档很多,且仅仅需要电子文档的就很麻烦了,需要打印再盖章再扫描,而且电子文档往往有失真的问题.本篇随笔介绍如何在在Winform程序中使用Spire.Pdf实现页面添加印章处理,解决这一痛处. 1.在PDF增加印章处理 首先我们来了解下,用Adobe Acrobat Reader 进行文档的印章处理下,看看如何实现的,后面再用软件实

随机推荐