vue中实现window.print()打印功能遇到的几个坑

vue中实现window.print()打印功能遇到的几个坑

之前做过打印pdf功能，现在是打印当前页面，使用window.print()可以打印，不过遇到的坑比较多，先给大家介绍下项目背景，我们使用vue+element UI这一套。
第一坑，点击打印按钮，会弹出预览打印的弹窗，原生的js打印会压缩页面，会打乱你之前的布局，这时候又是你头疼的时候，刚tm调好的样式，怎么又要调，不过再怎么发牢骚，工作还得继续，这时候需要我们手动去调整预览打印的弹窗的CSS样式。

此处的 #printMe1 表示当前要打印页面开始的div的id值。

第二坑，当你的打印预览弹窗的内容只有一页时，你一点击打印按钮，走到打印机跟前，神奇的事情发生了，这时候你一看，卧槽怎么还有一页白纸，当你回过头来看打印预览弹窗的时候，发现预览弹窗上显示两页，这时候你会在想，明明是一页内容怎么会打印两页呢？刚开始问题定位在js打印样式上面，各种修改样式，结果都是打印两页，百思不得其解，于是我翻遍了百度，有的帖子都翻了好几十遍了，都没能解决我的问题，但小编仍然坚持着，相信肯定会真相大白的。正当我垂头丧气的时候，突然脑袋里灵光一闪，小编开始删代码，这里删代码肯定不是要跑路，而是排查问题的一种思路，请大家不要多想，果不其然，还是逃不过本座的火眼金睛。

都是这个妖魔鬼怪在作祟。