1.下载插件vue-print-nb
Vue2.0 版本安装
npm install vue-print-nb --save
Vue3.0 版本安装
npm install vue3-print-nb --save
2. 封装打印方法
<template>
<el-dialog
class="bill-pring"
:title="title"
:visible.sync="dialogVisible"
:before-close="closeDialog"
:close-on-click-modal="false"
:append-to-body="true"
width="800px"
>
<div id="printBill">
<slot name="html"></slot>
</div>
<div slot="footer" class="footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" v-print="printBill"
>打 印</el-button
>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
// 显示隐藏
dialogVisible: {
type: Boolean,
required: false,
},
// 标题
title: {
type: String,
default: "票据打印",
},
},
data() {
return {
addressList: [],
printBill: {
id: "printBill",
popTitle: this.title, // 打印配置页上方标题
extraHead: "", //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
preview: "", // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
previewTitle: "", // 打印预览的标题(开启预览模式后出现),
previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
zIndex: "", // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)
clickMounted() {},
previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用)
previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
beforeOpenCallback() {
console.log("打印前");
}, // 开启打印前的回调事件
openCallback() {}, // 调用打印之后的回调事件
closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消)
},
};
},
created() {},
methods: {
// 关闭弹窗
closeDialog() {
this.$emit("update:dialogVisible", false);
},
async getAddressList() {
this.addressList = await this.$request("getAddressList");
},
},
watch: {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 20px;
}
</style>
3.使用打印功能
1.main.js引入
import Print from "vue-print-nb";
Vue.use(Print);
2.使用页面引入/注册
<script>
import billPrint from "../operation-query/bill-print.vue";
export default {
components: {
billPrint,
},
data() {
return {
tableDataTreat: [{
pduname:"美白",
user:"小小"
}],
}
}
}
</script>
3.打印 打印不识别第三方框架 一定要用原生table
<!-- 打印框 -->
<billPrint :dialogVisible.sync="printDialog" title="收据">
<template #html>
<div class="print-flex">
<div class="printDialog">
<h1>治疗单</h1>
<div class="info">
<p>姓名:</p>
<p>年龄:</p>
</div>
</div>
<table>
<tr style="line-height: 20px">
<th>名称</th>
<th>数量</th>
</tr>
<tr
v-for="(item, index) in tableDataTreat"
:key="index"
>
<td style="text-align: center; border: 1px solid #333">
{{ item.name }}
</td>
<td style="text-align: center; border: 1px solid #333">
{{ item.num}}
</td>
</tr>
</table>
</div>
</template>
</billPrint>