vue实现打印功能

打印功能可以自己使用原生js（window.print()）实现，其次就是使用插件，介绍一个打印插件

vue-print-nb：这个插件使用起来还是很便捷的，用法如下
1、安装

// vue2.0
npm install vue-print-nb --save
// vue3.0
npm install vue3-print-nb --save

请根据自己的需求安装版本

2、配置
vue2.0

// 全局配置
import Print from 'vue-print-nb'
Vue.use(Print);

// 仅使用页面配置
import print from 'vue-print-nb'
directives: {
    print   
}

vue3.0

// 全局配置
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)

// 仅使用页面配置
import print from 'vue3-print-nb'
directives: {
    print   
}

3、具体使用方法：（1）直接绑定id方法 （2）绑定对象方法

<!--直接绑定id方法-->
<div id='box'>
   <p>打印内容</p>
   <p>打印内容1111</p>
</div>
<div v-print="'#box'">打印</div>

<!--直接绑定对象方法-->
<div id='box'>
   <p>打印内容</p>
   <p>打印内容1111</p>
</div>
<div v-print='printObj'>打印</div>

export default{
   data(){
      return {
         printObj:{
            id:'box',
            beforeOpenCallback (vue) {
                console.log('打开之前')
            },
            openCallback (vue) {
                console.log('执行了打印')
            },
            closeCallback (vue) {
                console.log('关闭了打印工具')
            }
            //其他配置项，
         }
      }
   }
}

4、v-print API