vue 实现打印功能

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>