vue2/vue3实现打印功能（vue-print-nb）！

详细参考文章保证一路畅顺！npm官网：vue-print-nb - npm

一、vue2中使用：

 1.下载依赖：

npm install vue-print-nb --save

2.main.js中进行全局引入：

import Print from 'vue-print-nb'

Vue.use(Print);

3.参考示例：

<template>
    <div id='printDiv' >
        <p>打印出来看看</p>
    </div>
    <button v-print="'#printDiv'">打印</button>
</template>

二、vue3

1.下载依赖

npm install vue3-print-nb --save

2.main.js中进行全局引入：

import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

3.参考示例：

<template>
       <div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
    </div>

    <button v-print="'#printMe'">Print local range</button>
</template>

4.或者写法：

<template>
<button v-print="printObj">Print local range</button>
 
  <div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
    </div>
</template>

<script>
import {ref} from 'vue'
const  printObj = ref({
              id: "printMe",
              popTitle: 'good print',
              extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
              beforeOpenCallback (vue) {
                vue.printLoading = true
                console.log('打开之前')
              },
              openCallback (vue) {
                vue.printLoading = false
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            })
</script>

结束！