vue3中如何使用vue-print-nb添加页眉和页脚？

在Vue 3中，你可以使用`vue-print-nb`这个库来实现网页的打印功能。要添加页眉和页脚，你需要在HTML模板中设置一些特定的元素，并利用插件提供的API来控制它们。

首先，确保已经安装了`vue-print-nb`。如果你使用的是npm，可以在项目目录下运行：

npm install vue-print-nb

然后，在你的组件模板中，你可以创建一个`<template>`部分用于显示页眉和页脚。例如：

<template>
  <div id="printArea">
    <!-- 正文内容 -->
    <div v-if="$print.showHeader">
      <h1>这是页眉</h1>
    </div>

    <div v-if="$print.showFooter">
      <p>这是页脚，包含日期或其他信息</p>
    </div>

    <button @click="$print.print({ header: true, footer: true })">点击打印带页眉和页脚</button>
  </div>
</template>

在这个例子中，我们使用`v-if`指令来控制是否在打印时显示页眉和页脚。`$print`是一个来自`vue-print-nb`的全局属性，你可以通过它来操作打印选项。

在你的组件内部，可以使用`mounted()`生命周期钩子来初始化打印插件：

export default {
  mounted() {
    this.$print.init({
      printContainerId: 'printArea', // 设置需要打印区域的id
    })
  },
  methods: {
    $print: require('vue-print-nb').default,
  }
}

现在，当你点击"点击打印带页眉和页脚"按钮时，会按照设定的内容添加页眉和页脚进行打印。记得在实际使用中替换页眉和页脚的具体内容。