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

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

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

<script>
export default {
  methods: {
    printPage() {
      // 创建一个隐藏的iframe，并将要打印的内容插入到其中
      const printContent = this.$el.innerHTML
      const iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      document.body.appendChild(iframe)
      const doc = iframe.contentDocument || iframe.contentWindow.document
      const printWindow = iframe.contentWindow || iframe

      doc.body.innerHTML = printContent

      // 在CSS中定义打印时的样式，包括页眉和页脚
      const css = `
        @media print {
          @page {
            size: A4;
            margin: 1cm;
            @top-center {
              content: "页眉内容";
            }
            @bottom-center {
              content: "页脚内容";
            }
          }
        }
      `
      const style = doc.createElement('style')
      style.textContent = css
      doc.head.appendChild(style)

      // 打印
      printWindow.print()

      // 移除创建的iframe
      setTimeout(() => {
        document.body.removeChild(iframe)
      }, 100)
    }
  }
}
</script>

在这个示例中，我们创建了一个Vue组件，其中包含一个要打印的内容和一个打印按钮。当用户点击打印按钮时，我们将内容插入到一个隐藏的iframe中，并在CSS中定义打印时的样式，包括页眉和页脚。最后，我们调用iframe的print方法来打印内容，并在打印完成后移除创建的iframe。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整。另外，如果要在打印时使用Vue组件的数据，可以将数据传递给一个打印组件，并在该组件中生成打印内容和样式。