vue打印功能

先下载  https://github.com/xyl66/vuePlugs_printjs 

在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下，然后操作如下

在main.js中引入

import Print from '@/plugs/print'

Vue.use(Print) // 注册

vue组件中

注意事项 需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空

指定不打印区域

 方法1. 添加no-print样式类

?

1	"no-print">不要打印我

方法2. 自定义类名

?

1 2	"do-not-print-me-xxx">不要打印我 this.$print(this.$refs.print,{ 'no-print':'.do-not-print-me-xxx'}) // 使用

提示，github上有一个错误如下，避免踩坑，($ref 会报错，print undefind ;  改为 $refs 就好了)

 

执行方法：this.$print(this.$refs.print) 

实际代码：