vue3-print-nb 实现页面打印（含分页打印）

安装vue3-print-nb

npm install vue3-print-nb --save

引用vue3-print-nb

全局引入

（）

// 全局引用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   }

API

官���地址：https://github.com/Power-kxLee/vue3-print-nb

（）

官网有详细介绍

示例代码

全页面打印

打印整个页面

局部打印

被打印的区域需要被渲染出来，隐藏的元素不能打印

    
打印我吧
    
打印我吧
    
打印我吧
//写法一局部打印//写法二(可以接受对象)局部打印

分页打印

            打印                     // 方法一             // 使用p包裹需要分页的块 使用 css属性 page-break-after:always进行分页            第一页            第二页                 // 方法二     // 使用媒体查询 在打印时设置 body 和 html 的高度为auto     @media print {        @page {          size:  auto;        }        body, html {   //如果vue最外层id，默认是#app。如果设置了height:100%;，那么#app也加          height: auto !important;        }      }