vue-print 打印功能票据文档VUE3

1、xxxPrint 定义的对象被打开状态

2、nodejs安装 print 调出打印插件–vue3版本

      npm install vue3-print-nb --save复制

2.1 main.ts引入或者某个组件按需引入

import print from 'vue3-print-nb'
app.use(print)复制

3、定义 xxxPrint

//这里是打印的配置项
const  xxxPrint = ref({
    id: 'XXXXXID',//这里的id就是上面我们的打印区域id，实现指哪打哪
    popTitle: '标题', // 打印配置页上方的标题
    // extraHead: '空标签1', // 最上方的头部文字，附加在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绑定的按钮了！') },
})复制

3、定义id区域块写内容

  <div ref="XXXXXID">或者使用  <div id="XXXXXID">
	<div style="定义些样式">内容1</div>
	<div>内容2</div>
	<div>内容3</div>
	<div>内容4</div>
	<div>内容5</div>
	<div>内容6</div>
  </div>复制

4、点击打印v-print按钮调用 xxxPrint对象

 <div  class="ml-188 mt-4">
	<el-button type="primary"  ref="printButton"   v-print="xxxPrint" >打印</el-button>
 </div>复制

5、参考