场景

在页面显示的时候是分页现实的,当前页面只有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页面里。
略。

angular页面打印局部功能实现方法思考相关推荐

  1. itextsharp php,C#_C#使用iTextSharp设置PDF所有页面背景图功能实例,本文实例讲述了C#使用iTextSharp - phpStudy...

    C#使用iTextSharp设置PDF所有页面背景图功能实例 本文实例讲述了C#使用iTextSharp设置PDF所有页面背景图功能的方法.分享给大家供大家参考.具体如下: 在生成PDF 的时候,虽然 ...

  2. php怎么实现打印预览,JavaScript_js实现局部页面打印预览原理及示例代码,最近有朋友问js 如何打印预览 - phpStudy...

    js实现局部页面打印预览原理及示例代码 最近有朋友问js 如何打印预览,今天就来讲解一下,首先了解一下打印原理,其实局部打印页面很简单.就是把你需要打印的部分做一个起始标记,至于标记如何写,随便你写什 ...

  3. HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码),复制代码 代码如下: html - phpStudy...

    js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码 代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...

  4. jqprint 分页打印_JS实现页面打印(整体、局部)

    我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印 现在就轻松实现了页面的打印,但是这种方 ...

  5. vue中实现打印功能的方法与注意事项

    vue中实现打印功能的方法与注意事项 一.使用方法: 1. 在HTML中 2. 在VUE项目中 二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...

  6. vue html页面打印功能vue-print-nb

    vue项目中,HTML页面打印功能 组件vue-print-nb 源码: https://github.com/shengbid/vue-print, https://github.com/sheng ...

  7. Vue使用Print插件实现页面打印功能/打印列表

    Vue使用Print插件实现页面打印 示例 官网地址可以下载最新版 官网 下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...

  8. Vue使用PrintJS实现页面打印功能

    说明 大家好,我是呆小杰,收到一个需求,要求实现 拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能. 实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内 ...

  9. 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

  10. Python实现打印螺旋矩阵功能的方法

    Python实现打印螺旋矩阵功能的方法 本文实例讲述了Python实现打印螺旋矩阵功能的方法.分享给大家供大家参考,具体如下: 一.问题描述 输入N, 打印 N*N 螺旋矩阵 比如 N = 3,打印: ...

最新文章

  1. python爬虫天气实例scrapy_python爬虫之利用scrapy框架抓取新浪天气数据
  2. 研究生的早期科研之路
  3. 某易游戏经典吃豆豆动画404页面源码
  4. opensource项目_推出“什么是开放式教育?” Opensource.com上的资源
  5. Luogu P1164小A点菜
  6. JavaScript基础介绍
  7. 小程序页面启动过程分析
  8. java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
  9. 综述 | 知识图谱技术综述(上)
  10. Intel-VT 与虚拟化限制
  11. 淘宝、天猫、京东、苏宁等平台抢购脚本
  12. 最新的quartus ii、dsp builder、matlab版本匹配安装破解
  13. MFC使用Windows API实现U盘插拔检测,获取U盘容量,U盘内容移动删除,开启和关闭U盘以及获取盘符
  14. 红到发紫的人工智能,2019运势如何?
  15. 广州计算机专业分数线,广东人工智能专业分数线多少
  16. java实现王者荣耀匹配规则,王者荣耀匹配机制(通俗版)
  17. 【ZCMU1434】糖果迷阵
  18. vue provide / inject 实现组件数据的实时响应
  19. 职场沟通利器(1):顶级咨询公司PPT模板
  20. 雷达跟踪软件 SPx Server

热门文章

  1. Delphi开发经验谈
  2. 无人机未来有一大波创富平台
  3. 美食杂志排行榜_百度知道
  4. MongoDB副本集学习(三):性能和优化相关
  5. IT群侠传第一回内外兼修
  6. IBM大力抢占网络宣传阵地,拿下百度“SOA”关键字的第一位
  7. 各种语音编码方法,所需要的带宽
  8. B - Catch That Cow(广度搜索)
  9. 二元置信椭圆r语言_医学统计与R语言:Logistic Distribution
  10. deepin允许root登录_王者荣耀安卓免ROOT不用电脑修改战区2020最新版教程