vue2 vue3 打印插件 vue-print-nb

1,119 阅读1分钟

Vue2 版本:

npm install vue-print-nb --save

注册:

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

// 局部引入
import print from 'vue-print-nb'
directives: {
    print   
}

Vue3 版本:

npm install vue3-print-nb --save

注册:

// 全局引入
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')

// 局部引入
import print from 'vue3-print-nb'

directives: {
    print   
}

使用:

打印整个页面:

   <button v-print>Print the entire page</button>

打印本地范围:

    <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>