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


Posted in Javascript onApril 13, 2018

前言

本文主要介绍了关于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');
  }
 });
 }

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

在打印页面里自动处理了分页显示等问题。测试一页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);
 }

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

在iframe页面里调用打印

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

略。

总结

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

Javascript 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 #Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 #Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 #Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 #Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 #Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 #Javascript
Vue2.0 实现单选互斥的方法
Apr 13 #Javascript
You might like
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
Javascript 类型转换方法
2010/10/24 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python爬取内容存入Excel实例
2019/02/20 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python生成任意频率正弦波方式
2020/02/25 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
深圳茁壮笔试题
2015/05/28 面试题
竞选部门副经理的自荐书范文
2014/02/11 职场文书
施工质量承诺书范文
2014/05/30 职场文书
运动会演讲稿50字
2014/08/25 职场文书
小浪底导游词
2015/02/12 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
导游词之西安大清真寺
2019/12/17 职场文书