先说结论:html标签的高度如果设置为100%,打印div的高度设不设置都会多一个空白页。
经过是这样的:
最近同事写一个项目,但是遇到了一个问题,使用vue-print-nb打印时,预览中一定会出现两页,并且打印的div没有设置高度也没有设置margin。我创建一个新测试项目后发现新项目不会出现两页的情况,一度怀疑是不是被什么插件影响到了。
后来商量以后同事提出可能是继承了父高度,于是我把原项目涉及打印div的父高度的css全都复制了过来,果然出现两页了,问题找到了,解决办法就好说了,一个一个往外删除,后来发现body跟#app的高度都不会影响打印的页数,但是html的高度如果设置为100%就会出现打印两页的情况。
第一次使用碰到的坑,感觉还是记录一下比较好。
博客讲述了在使用vue-print-nb进行打印时遇到的一个问题,即设置了html标签高度为100%会导致打印内容分页,即便div未设置高度和margin也会产生两页。通过排查,发现在复制了原有项目的父级高度样式后问题出现,最终定位到body和#app的高度不影响,但html的高度设置为100%是触发问题的关键。解决方案是删除不必要的高度设置,避免100%的高度继承。
5006

被折叠的 条评论
为什么被折叠?



