安装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
官网有详细介绍
示例代码
全页面打印
局部打印
被打印的区域需要被渲染出来,隐藏的元素不能打印
打印我吧
打印我吧
打印我吧
//写法一//写法二(可以接受对象)
分页打印
// 方法一 // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页第一页第二页 // 方法二 // 使用媒体查询 在打印时设置 body 和 html 的高度为auto @media print {@page {size:auto;}body, html { //如果vue最外层id,默认是#app。如果设置了height:100%;,那么#app也加height: auto !important;}}