vue3使用vue3-print-nb实现区域打印功能

目录场景一.安装vue3-print-nb二.在main.ts中引入三.HTML四.参数配置附：分页打印示例代码总结场景

大多数后台系统中都存在打印的需求，在有打印需求时，对前端来说当然是直接打印页面更容易，那么本篇文章就是在vue3中，使用vue3-print-nb插件来区域打印，实现指哪打哪！

一.安装vue3-print-nbnpm install vue3-print-nb二.在main.ts中引入//引入import print from 'vue3-print-nb'//挂载const app = createApp(App)app.use(print)三.HTML<!-- 打印区域容器 --><div id='printBox'><span>我就是被打印的内容</span><span>在#printBox 容器里的内容都会被打印噢</span></div><!-- 按钮绑定打印 --><button v-print='print'>点击打开打印预览</button>四.参数配置//这里是打印的配置项const print=ref({id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪popTitle: '配置页眉标题', // 打印配置页上方的标题extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割preview: false, // 是否启动预览模式，默认是falsepreviewTitle: '预览的标题', // 打印预览的标题previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callbackpreviewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callbackbeforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callbackopenCallback() { console.log('执行打印了！') }, // 调用打印时的callbackcloseCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)clickMounted() { console.log('点击v-print绑定的按钮了！') }, })附：分页打印示例代码<template> <div><button v-print=''#a''>打印</button><div id='a'> // 方法一 // 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页 <div style='page-break-after:always'>第一页</div> <div style='page-break-after:always'>第二页</div></div> </div></template><style> // 方法二 // 使用媒体查询 在打印时设置 body 和 html 的高度为auto @media print {@page { size: auto;}body, html { //如果vue最外层id，默认是#app。如果设置了height:100%;，那么#app也加 height: auto !important;} }</style>总结

到此这篇关于vue3使用vue3-print-nb实现区域打印功能的文章就介绍到这了,更多相关vue3实现区域打印内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网！