当前位置：首页 > VUE

vue实现预览打印

2026-02-17 21:10:54VUE

Vue 实现预览打印的方法

在 Vue 中实现预览打印功能可以通过多种方式完成，以下是几种常见的方法：

使用 window.print() 方法

通过调用浏览器的原生打印功能实现预览打印。创建一个专门用于打印的组件或页面，隐藏不需要打印的元素，仅保留需要打印的内容。

<template>
  <div>
    <button @click="print">打印</button>
    <div ref="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印预览</h1>
      <p>这是需要打印的内容</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      const printContent = this.$refs.printContent.innerHTML;
      const originalContent = document.body.innerHTML;
      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
};
</script>

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，使用简单且功能强大。

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

<template>
  <div>
    <button v-print="printObj">打印</button>
    <div id="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印预览</h1>
      <p>这是需要打印的内容</p>
    </div>
  </div>
</template>

<script>
import print from 'vue-print-nb';

export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题'
      }
    };
  }
};
</script>

使用 CSS 控制打印样式

通过 CSS 的 @media print 规则控制打印时的样式，隐藏不需要打印的元素。

<template>
  <div>
    <button @click="print">打印</button>
    <div class="print-area">
      <!-- 需要打印的内容 -->
      <h1>打印预览</h1>
      <p>这是需要打印的内容</p>
    </div>
    <div class="no-print">
      <!-- 不需要打印的内容 -->
    </div>
  </div>
</template>

<style>
@media print {
  .no-print {
    display: none;
  }
  .print-area {
    display: block;
  }
}
</style>

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

使用 iframe 实现打印

通过动态创建 iframe 加载需要打印的内容，然后调用 iframe 的打印功能。

<template>
  <div>
    <button @click="print">打印</button>
    <div ref="printContent">
      <!-- 需要打印的内容 -->
      <h1>打印预览</h1>
      <p>这是需要打印的内容</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      const content = this.$refs.printContent.innerHTML;
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      const frameDoc = iframe.contentDocument || iframe.contentWindow.document;
      frameDoc.open();
      frameDoc.write(content);
      frameDoc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    }
  }
};
</script>