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页面里。
略。
angular页面打印局部功能实现方法思考相关推荐
- itextsharp php,C#_C#使用iTextSharp设置PDF所有页面背景图功能实例,本文实例讲述了C#使用iTextSharp - phpStudy...
C#使用iTextSharp设置PDF所有页面背景图功能实例 本文实例讲述了C#使用iTextSharp设置PDF所有页面背景图功能的方法.分享给大家供大家参考.具体如下: 在生成PDF 的时候,虽然 ...
- php怎么实现打印预览,JavaScript_js实现局部页面打印预览原理及示例代码,最近有朋友问js 如何打印预览 - phpStudy...
js实现局部页面打印预览原理及示例代码 最近有朋友问js 如何打印预览,今天就来讲解一下,首先了解一下打印原理,其实局部打印页面很简单.就是把你需要打印的部分做一个起始标记,至于标记如何写,随便你写什 ...
- HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码),复制代码 代码如下: html - phpStudy...
js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码 代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...
- jqprint 分页打印_JS实现页面打印(整体、局部)
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考. 方式一:window.print() 整体打印 1打印 现在就轻松实现了页面的打印,但是这种方 ...
- vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项 一.使用方法: 1. 在HTML中 2. 在VUE项目中 二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
- vue html页面打印功能vue-print-nb
vue项目中,HTML页面打印功能 组件vue-print-nb 源码: https://github.com/shengbid/vue-print, https://github.com/sheng ...
- Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印 示例 官网地址可以下载最新版 官网 下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
- Vue使用PrintJS实现页面打印功能
说明 大家好,我是呆小杰,收到一个需求,要求实现 拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能. 实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内 ...
- 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)
这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...
- Python实现打印螺旋矩阵功能的方法
Python实现打印螺旋矩阵功能的方法 本文实例讲述了Python实现打印螺旋矩阵功能的方法.分享给大家供大家参考,具体如下: 一.问题描述 输入N, 打印 N*N 螺旋矩阵 比如 N = 3,打印: ...
最新文章
- python爬虫天气实例scrapy_python爬虫之利用scrapy框架抓取新浪天气数据
- 研究生的早期科研之路
- 某易游戏经典吃豆豆动画404页面源码
- opensource项目_推出“什么是开放式教育?” Opensource.com上的资源
- Luogu P1164小A点菜
- JavaScript基础介绍
- 小程序页面启动过程分析
- java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
- 综述 | 知识图谱技术综述(上)
- Intel-VT 与虚拟化限制
- 淘宝、天猫、京东、苏宁等平台抢购脚本
- 最新的quartus ii、dsp builder、matlab版本匹配安装破解
- MFC使用Windows API实现U盘插拔检测,获取U盘容量,U盘内容移动删除,开启和关闭U盘以及获取盘符
- 红到发紫的人工智能,2019运势如何?
- 广州计算机专业分数线,广东人工智能专业分数线多少
- java实现王者荣耀匹配规则,王者荣耀匹配机制(通俗版)
- 【ZCMU1434】糖果迷阵
- vue provide / inject 实现组件数据的实时响应
- 职场沟通利器(1):顶级咨询公司PPT模板
- 雷达跟踪软件 SPx Server