vue3-print-nb的使用记录

1.安装vue3-print-nb

npm install vue3-print-nb --save

2.main.js引入

import print from 'vue3-print-nb'

app.use(print)

3.注意事项：

①打印id必须放在单独的一个div上

②参数配置 

const printObj = ref({
  id: "printMe", // 这里是要打印元素的ID
  popTitle: "打印表单", // 打印的标题
  extraCss: "", // 打印可引入外部的一个 css 文件
  preview: true, // 是否启动预览模式，默认是false
  previewTitle: '', // 打印预览的标题
  previewPrintBtnLabel: '', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20003, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback(vue) {
    vue.printLoading = true
    console.log('开始打印之前！')
  }, // 开始打印之前的callback
  openCallback(vue) {
    vue.printLoading = false
    console.log('监听到了打印窗户弹起了！')
  }, // 调用打印时的callback
  closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(点击弹窗的取消和打印按钮都会触发)
  clickMounted() { console.log('点击v-print绑定的按钮了！') },

})

③打印样式的CSS样式

@media print {}

④打印界面的element-plus中的复选框组件勾选消失问题（目前遇到的问题）

@media print {

.el-checkbox__input {

color-adjust: exact;

-webkit-print-color-adjust: exact;

-moz-print-color-adjust: exact;

}

}

4.案例

<template>
  <div class="app-container">
    <div id="printMe" class="top print-area">
    <table>
<tr>
          <td class="one_top">姓名</td>
          <td class="one_top_a">{{ student.name }}</td>
          <td class="one_top">学号</td>
          <td class="one_top_a">{{ student.studentId }}</td>
          <!-- <td rowspan="4" class="photo">照片</td> -->
          <td rowspan="4" class="photo">
            <div>
              <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
            </div>
          </td>
        </tr>
        <tr>
          <td>爱吃的水果</td>
          <td colspan="3">
            <div class="checkbox-group">
              <el-checkbox v-for="(item, index) in student.enrollmentChanges" :key="index" :label="item.description" :model-value="item.checked" @change="toggleChange(index)">
                {{ item.description }}
              </el-checkbox>
            </div>
          </td>
        </tr>
    </table>
    </div>
    <!-- <button @click="print">打印发票</button> -->
    <el-button ref="printButton" v-print="printObj">打印</el-button>
  </div>
</template>
<script setup>
import { ref, nextTick } from "vue";
const printObj = ref({
  id: "printMe", // 这里是要打印元素的ID
  // url:'https://www.baidu.com/',
  popTitle: "打印异动审批表", // 打印的标题
  // extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", // 打印可引入外部的一个 css 文件
  // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 打印头部文字
  //   preview: true, // 是否启动预览模式，默认是false
  //   previewTitle: '打印客户账单', // 打印预览的标题
  //   previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20003, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  beforeOpenCallback(vue) {
    vue.printLoading = true;
    console.log("开始打印之前！");
  }, // 开始打印之前的callback
  openCallback(vue) {
    vue.printLoading = false;
    console.log("监听到了打印窗户弹起了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
  }, // 关闭打印的callback(点击弹窗的取消和打印按钮都会触发)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
});
    const student = ref({
  name: "张三",
  studentId: "20230001",
  enrollmentChanges: [
    { description: "苹果", checked: true },
    { description: "香蕉", checked: false },
    { description: "橘子", checked: false },
    { description: "橙子", checked: false },
  ],
});
</script>
<style lang="scss" scoped>
/* 添加一些样式使打印内容更好看 */
.top {
  text-align: center;
  width: 90%;
  margin: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f2f2f2;
}
.one_top {
  width: 100px;
}
.one_top_a {
  width: 150px;
}
.photo {
  width: 180px;
}
.checkbox-group {
  display: flex;
  justify-content: space-around;
}
.note {
  height: 150px;
}
.signature {
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: space-between;
}
.valCss {
  display: flex;
  justify-content: flex-start;
}
</style>
<style media="print">
@media print {
  .el-checkbox__input {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
  }
  @page {
    size: auto;
    margin: 3mm;
  }
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }  body {
    border: 1px solid #ffffff;
    margin: 10mm 10mm 10mm 10mm;
  }
}
</style>