vue 项目中页面打印实现
参考文章:
13 Paged media
项目描述:
背景:框架vue、组件 element-ui,已有一个在用的后台管理系统
需求:现需在列表页面添加按钮-----打印协议,并且在点击按钮以后,进入打印页面,确认无误后在打印页面点击打印直接调电脑连接的打印机。
主要代码:
window.print()
实现思路:
1、项目本身具有layout嵌套,window.print() 会打印整个页面,layout部分也会被打印,要避免这种情况,只能新建.vue文件,并且,尤其注意,路由需要在最上层,不要嵌套;
2、待打印页面一般会附带一个 打印 按钮,注意 在 点击打印按钮以后,先隐藏此按钮,再调 window.print();
3、去掉页眉页脚, 正常 print() 浏览器会带页眉和页脚,包含日期、页码、页面title、当前url,这些信息往往不适合打印出来,所以需要去掉。去掉方式参见文章13 Paged media:
@page{
size: auto A4 landscape;
margin: 3mm;
}
同时,打印多页的情况下,在当前内容的盒子上加padding,每个页面情况不一样,padding的值也不固定,需要尝试
.agreeCon {
background: #fff;
box-sizing: border-box;
padding: 2rem 3rem 4rem;
}