vue-print-nb使用问题记录

1,493 阅读1分钟

需求

实现局部打印

遇到的问题

背景色没有

image.png

image.png

将背景图形勾上

不要页眉页脚

image.png

image.png

页眉和页脚取消勾选

自己写的样式在打印预览中丢失

改写为内联样式

第三方组件样式丢失

要么就不使用第三方组件,要么就配置: extraCss 配置方式详见这里, 多个样式文件以英文逗号分隔

image.png

image.png

为什么会丢失样式? 因为vue-print-nb的原理大概是在你的页面上创建一个iframe,然后把你要打印的那一个div抓出来给iframe。 怎么验证你说的这个原理,打印预览界面出来之后,右击在上下文菜单中选择“检查”,就可以看到iframe的身影

我需要打印预览的样式和我在电脑上的样式有点区别

将样式写在

@media print {
  // 这里写你打印预览时的样式
}

参考文章

使用vue-print-nb插件页面空白以及打印没有样式问题

Vue实战:指定区域打印功能的实现(附示例)