vue实现打印功能的两种方法

第一种方法：通过npm安装插件

1.安装NPM安装vue-打印-nb-保存

2.安装后在main.js文件中介绍。

从' vue-print-nb' Vue.use(Print)导入Print；//注册3，现在就可以用了

Div ID='打印测试' pNoon除草日/pp出汗掉土/pp中餐/pp粒硬/p/div按钮v-print='' #打印测试' ' print/按钮如果内容打印不完全，打印操作时点击更多设置，然后设置缩放

第二种方法：在本地手动下载插件

插件地址：https://github.com/xyl66/vuePlugs_printjs

在src下，创建一个新的plugs文件夹，将下载的print.js放在plugs文件夹中，然后按如下操作

从“@/plugs/print”vue . use(print)//register Template section ref=“print”print content div class=“no-print”不要打印me /div/section/Template this。$ print(这个。参考文献。print)//使用ref获取dom节点的注意事项。如果DOM节点是通过id或类直接获得的，则在webpack打包和部署后打印的内容为空

指定非打印区域

方法一。添加非打印样式类

Div class='no-print '不要打印我/div方法2。自定义类名。

Div class='不要打印我-xxx '不要打印我/div这个。$ print(这个。$ refs.print，{'no-print' : '。do-not-print-me-XXX ' })//使用提示，github上出现如下错误。只需将其更改为$refs)

摘要

以上是边肖介绍的vue的两种印刷方式。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！