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

使用vue-print-nb添加页眉和页脚的步骤如下：

1. 首先，确保你已经安装了vue-print-nb插件。可以通过npm或yarn进行安装：

   npm install vue-print-nb
   或
   yarn add vue-print-nb

2. 在你的Vue组件中引入vue-print-nb插件：

   import Print from 'vue-print-nb'

3. 在Vue组件的`components`属性中注册Print组件：

   components: {
     Print
   }

4. 在需要打印的页面中，使用Print组件包裹需要打印的内容，并设置相应的属性：

   <template>
     <div>
       <Print :printable="printable" :beforePrint="beforePrint" :afterPrint="afterPrint">
         <!-- 需要打印的内容 -->
       </Print>
     </div>
   </template>

5. 在Vue组件的`data`属性中定义`printable`、`beforePrint`和`afterPrint`属性：

   data() {
     return {
       printable: true, // 是否可打印，默认为true
       beforePrint: () => {
         // 打印前的回调函数，可以在这里设置页眉和页脚
         // 例如：document.getElementById('header').style.display = 'block';
       },
       afterPrint: () => {
         // 打印后的回调函数，可以在这里恢复原来的页眉和页脚
         // 例如：document.getElementById('header').style.display = 'none';
       }
     }
   }

6. 在需要打印的内容中添加页眉和页脚的HTML代码：

   <template>
     <div>
       <Print :printable="printable" :beforePrint="beforePrint" :afterPrint="afterPrint">
         <div id="header">这是页眉</div>
         <!-- 需要打印的内容 -->
         <div id="footer">这是页脚</div>
       </Print>
     </div>
   </template>

以上就是使用vue-print-nb添加页眉和页脚的基本步骤。你可以根据实际需求自定义页眉和页脚的样式和内容。