vue-print-nb打印页眉页脚

可以使用 vue-print-nb 插件来实现打印页眉页脚。具体步骤如下：

1. 安装 vue-print-nb 插件：

npm install vue-print-nb --save

2. 在需要打印的组件中引入插件：

import Print from 'vue-print-nb'
export default {
  components: {
    Print
  },
  // ...
}

3. 在需要打印的组件中添加打印按钮，并绑定打印事件：

<template>
  <div>
    <!-- 打印按钮 -->
    <button @click="print">打印</button>
    <!-- 需要打印的内容 -->
    <div ref="printContent">
      <!-- ... -->
    </div>
  </div>
</template>

export default {
  // ...
  methods: {
    // 打印事件
    print() {
      this.$print(this.$refs.printContent)
    }
  }
}

4. 在需要打印的组件中添加页眉页脚模板：

<template>
  <div>
    <!-- 打印按钮 -->
    <button @click="print">打印</button>
    <!-- 需要打印的内容 -->
    <div ref="printContent">
      <!-- ... -->
    </div>
    <!-- 页眉页脚模板 -->
    <Print :title="title" :printStyle="printStyle">
      <template #header>
        <div style="text-align: center;">
          <h1>页眉</h1>
        </div>
      </template>
      <template #footer>
        <div style="text-align: center;">
          <h1>页脚</h1>
        </div>
      </template>
    </Print>
  </div>
</template>

export default {
 // ...
  data() {
    return {
      // 页眉
      title: '页眉',
      // 打印样式
      printStyle: `
        @page {
          size: A4;
          margin: 0;
        }
        body {
          margin: 1.6cm;
        }
      `
    }
  },
  methods: {
    // 打印事件
    print() {
      this.$print(this.$refs.printContent)
    }
  }
}