vue3实现区域打印功能(vue3-print-nb)
前端使用vue3-print-nb插件来区域打印,实现指哪打哪!
·
场景
大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,那么本篇文章就是在vue3中,使用vue3-print-nb插件来区域打印,实现指哪打哪!
一.安装vue3-print-nb
npm 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, // 是否启动预览模式,默认是false
previewTitle: '预览的标题', // 打印预览的标题
previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
previewBeforeOpenCallback() { console.log('正在加载预览窗口!'); }, // 预览窗口打开之前的callback
previewOpenCallback() { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback
beforeOpenCallback() { console.log('开始打印之前!') }, // 开始打印之前的callback
openCallback() { console.log('执行打印了!') }, // 调用打印时的callback
closeCallback() { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
clickMounted() { console.log('点击v-print绑定的按钮了!') },
})
推荐文章
Print.js实现打印pdf,HTML,图片(可设置样式可分页)
更多推荐
所有评论(0)