在vue中使用printJS组件设置浏览器打印机的页眉和页脚 写一个dome

好的，以下是一个基于Vue和PrintJS的设置打印页眉和页脚的示例：

首先安装PrintJS：

npm install print-js

然后在Vue组件中引入PrintJS：

import printJS from 'print-js'

接下来，我们可以在Vue组件的方法中使用PrintJS来打印内容，并设置页眉和页脚。示例代码如下：

<template>
  <div>
    <h1>这是要打印的内容</h1>
    <p>这是要打印的内容的第一段</p>
    <p>这是要打印的内容的第二段</p>
    <button @click="printPage">打印</button>
  </div>
</template>

<script>
import printJS from 'print-js'

export default {
  methods: {
    printPage() {
      // 定义打印时的样式，包括页眉和页脚
      const css = `
        @page {
          size: A4;
          margin: 1cm;
          @top-center {
            content: "页眉内容";
          }
          @bottom-center {
            content: "页脚内容";
          }
        }
      `

      // 使用PrintJS打印内容，并设置样式
      printJS({
        printable: this.$el.innerHTML,
        type: 'html',
        style: css
      })
    }
  }
}
</script>

在这个示例中，我们使用PrintJS的printJS方法来打印内容，并在options中设置样式。请注意，这里的样式需要使用CSS语法，并且必须使用@page伪元素来定义页眉和页脚，与前面使用iframe打印的示例略有不同。

当用户点击打印按钮时，我们调用printPage方法来触发打印操作。PrintJS会自动将要打印的内容插入到一个隐藏的iframe中，并应用设置的样式。

在实际应用中，我们可以根据具体需求来调整打印样式和内容。另外，PrintJS还提供了许多其他的配置选项，例如打印前的回调函数、打印后的回调函数、打印页面的标题等，可以进一步满足我们的需求。