vue-print-nb打印预览时多一张空白页

最新推荐文章于 2024-08-04 18:34:19 发布

张嘉悦儿

最新推荐文章于 2024-08-04 18:34:19 发布

阅读量1.8k

点赞数 4

文章标签： vue.js 前端 javascript vue

本文链接：https://blog.csdn.net/weixin_42234899/article/details/130615155

版权

在使用vue-print-nb进行打印预览时遇到内容显示两页且第二页为空白的情况。问题根源在于缺少打印专属样式。通过添加@page和html的样式设置，将margin设为3mm并确保无额外边距，成功解决了多打印一页的问题。分享此解决方案以帮助遇到同样问题的开发者。

摘要由CSDN通过智能技术生成

需求：使用vue-print-nb打印预览时，内容一页就打印预览和打印时显示一页，但目前遇到的问题是显示两页，第二页是空白页。

解决办法：首先分析了打印页面的html布局，并没有什么不妥，但就是会多打印一张空白页，就很烦。ok，先别烦，www.baidu.com是个神奇的网站。搜一下喽。但看到很多都在说是因为margin没有设置为0的原因导致的，以及其他内外边距设置的不对等等。大致试了下，发现并没有改变。

后来发现问题原因：打印应该有个专属的style

1、html部分

2、style

2.1、直接粘贴即可

<style @media="print">
  @page {
    size: auto;
    margin: 3mm;
}

html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
}

原因可能是没有设置打印的样式才导致多打印一页空白页。希望能帮助到有需要的同仁。若有问题，请随时提出，以免误导他人，感谢！

祝君写的代码永无bug！！！

关注