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 27 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
js判断节假日实例代码
Dec 27 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 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 中使用随机数的三个步骤
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
javascript中简单的进制转换代码实例
2013/10/26 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python读取xml文件方法解析
2020/08/04 Python
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
质量负责人任命书
2014/06/06 职场文书
房屋租房协议书范本
2014/12/04 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
Python之matplotlib绘制饼图
2022/04/13 Python