本文主要介绍了关于角实现页面打印局部功能的相关内容,分享出来供大家参考,下面话不多说了,来一起看看详细的介绍吧。
在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据。
并且在当前页面包含了表格之外的标题,菜单等其他元素。
后天api请求都需要带令牌上信息
<强>
强>
1,通过缓存传递数据,
2路由跳转到打印页面,
3页面获取缓存数据,
4,调用浏览器打印方法,
5,操作完毕页面后退一步
<强>调用打印页面强>
this.cach。setBylocal({键:键值:数据});//写入缓存 this.router。导航([url,关键]);//路由跳转,缓存关键值传递过去
打印页面
ngAfterViewInit () { const瞿=this.route.params美元。订阅(q=比;{ const关键=q.key; 如果(关键){ 这一点。_data=https://www.yisu.com/zixun/this.cach.getBylocal(关键); this.cach.removeBylocal(关键); setTimeout (()=> { window.print (); history.go (1); },“20”); } }); }
私人(url:字符串,身体# 63;:任何){
this.http返回。帖子(url,身体| | null, {
responseType:“blob”
})
}
私人下载(url:字符串类型:字符串,身体# 63;:任何文件名# 63;:字符串){
返回。身体(url)。地图(r=比;{
const blob=new blob ([r]{类型:类型});
const objectUrl=URL.createObjectURL (blob);
const a=document.createElement (' a ');
document.body.appendChild(一个);
一个。setAttribute(“风格”,“显示:没有”);
一个。setAttribute (“href”, objectUrl);
如果(文件名){
一个。setAttribute(“下载”,文件名);
其他}{
一个。setAttribute(“目标”,“平等”);
}
a.click ();
URL.revokeObjectURL (objectUrl);
返回true;
});
}/* *
*下载pdf,如果不传入文件名会再浏览器中打开实现打印功能
*传入文件名会直接下载
* @param{}字符串url
* @param身体
* @param{字符串}文件名
* @returns {Observable