vue 项目中页面打印实现（去除页眉页脚）

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;
}