一、安装依赖

// vue3 安装
npm install vue3-print-nb
// 或
yarn add vue3-print-nb

// vue2 安装
npm install vue-print-nb
// 或
yarn add vue-print-nb

二、在main.js种引入

import print from 'vue3-print-nb'

const app = createApp(App)
app.use(print)
app.mount('#app')

三、在组件中使用

<template>
  <div>
    <!-- 需要给外层包裹元素ref，在点击打印阶段需要使用ref获取打印元素，需要指定id用于捆绑触发打印的按钮 -->
    <div ref="printTest" id="printTest" class="print">
      <div class="purpose_desc" v-html="reportContent"></div>
    </div>
    <!-- v-print指令可以直接绑定到对应的打印区域-->
    <div class="print-button">
      <el-button
        v-print="printObj"
        type="primary"
        size="mini"
        @click="upadtaPrintStatus"
        >打印</el-button
      >
    </div>
  </div>
</template>

<script setup>

import { reactive, ref } from "@vue/reactivity";

let printObj = reactive({
  id: "printTest", //绑定打印区域id
  popTitle: "", //内容标签
  beforeOpenCallback(vue) {
    console.log("打开之前");
  },
  //调用打印工具成功回调函数
  openCallback(vue) {
    console.log("执行了打印");
  },
  //关闭打印机的回调
  closeCallback(vue) {
    console.log("关闭了打印工具");
  },
});

</script>