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、参考
原文地址:https://blog.csdn.net/beiback/article/details/129889885
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_31370.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
