当前位置：首页 > VUE

vue实现填写打印功能

2026-02-22 20:58:34VUE

使用Vue实现填写打印功能

在Vue中实现填写打印功能可以通过多种方式完成，以下是一些常见的方法：

方法一：使用window.print()

在Vue组件中创建一个打印按钮，点击时调用window.print()方法。这种方法简单直接，适用于打印整个页面或特定内容。

<template>
  <div>
    <div ref="printContent">
      <!-- 这里放置需要打印的内容 -->
      <h1>打印内容标题</h1>
      <p>这是需要打印的内容...</p>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      window.print();
    }
  }
}
</script>

<style>
@media print {
  /* 打印时隐藏不需要的元素 */
  body * {
    visibility: hidden;
  }
  #printContent, #printContent * {
    visibility: visible;
  }
  #printContent {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

方法二：使用iframe打印特定内容

如果需要更精细地控制打印内容，可以使用iframe方式：

vue实现填写打印功能

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

<script>
export default {
  methods: {
    printContent() {
      const content = this.$refs.printContent.innerHTML;
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);

      const doc = iframe.contentWindow.document;
      doc.open();
      doc.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>打印内容</title>
            <style>
              /* 打印样式 */
              @page { size: auto; margin: 0mm; }
              body { margin: 0; padding: 0; }
            </style>
          </head>
          <body>${content}</body>
        </html>
      `);
      doc.close();

      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    }
  }
}
</script>

方法三：使用第三方库

可以使用专门的打印库如vue-print-nb，它提供了更简单的API：

安装库：
```
npm install vue-print-nb
```

在Vue中使用：


<template>
<div>
 <div id="printMe">
   <!-- 打印内容 -->
 </div>
 <button v-print="'#printMe'">打印</button>
</div>
</template>

import print from 'vue-print-nb'

export default { directives: { print } }

```

方法四：打印表单数据

如果需要打印用户填写的表单数据，可以这样实现：

<template>
  <div>
    <form ref="form">
      <input v-model="name" placeholder="姓名">
      <input v-model="email" placeholder="邮箱">
    </form>
    <button @click="printForm">打印表单</button>
    <div ref="printPreview" style="display:none">
      <h2>表单数据</h2>
      <p>姓名: {{ name }}</p>
      <p>邮箱: {{ email }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    printForm() {
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <html>
          <head>
            <title>打印表单</title>
          </head>
          <body>
            ${this.$refs.printPreview.innerHTML}
          </body>
        </html>
      `);
      printWindow.document.close();
      printWindow.print();
    }
  }
}
</script>