vue3使用打印插件安装:
npm install vue3-print-nb --save
vue2使用打印插件安装:
npm install vue-print-nb --save
使用方式:
// 在需要打印的dom上添加id
<div class="view-content" id="printBox"></div>
// 给按钮绑定打印事件
// v-print
<el-button class="save-btn" @click="setPrint" v-print="print">打印</el-button>
// 打印调用 以及 相关配置
// id 必须跟需要打印的dom所绑定的id一致
const print = reactive({
id: 'printBox',//必须跟dom的id一致
popTitle: '', // 打印配置页上方的标题
extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
preview: false, // 是否启动预览模式,默认是false
previewTitle: '预览', // 打印预览的标题
previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
previewBeforeOpenCallback() { }, // 预览窗口打开之前的callback
previewOpenCallback() { }, // 预览窗口打开时的callback
beforeOpenCallback() { }, // 开始打印之前的callback
openCallback() { }, // 调用打印时的callback
closeCallback() { }, // 关闭打印的callback(无法区分确认or取消)
clickMounted() { },
})