当前位置：首页 > VUE

vue实现打印

2026-01-13 07:57:07VUE

Vue 实现打印功能的方法

在 Vue 项目中实现打印功能，可以通过以下几种方式实现，具体选择取决于项目需求和复杂度。

使用 window.print() 方法

最简单的打印方式是直接调用浏览器原生的 window.print() 方法。这种方式适用于打印整个页面或当前窗口内容。

methods: {
  printPage() {
    window.print();
  }
}

打印指定区域内容

如果需要打印页面中的特定区域，可以通过 CSS 控制打印内容的显示和隐藏。

<template>
  <div>
    <div class="no-print">这部分内容不打印</div>
    <div id="printArea">这部分是需要打印的内容</div>
    <button @click="printSpecificArea">打印指定区域</button>
  </div>
</template>

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

<script>
methods: {
  printSpecificArea() {
    const printContent = document.getElementById('printArea').innerHTML;
    const originalContent = document.body.innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
  }
}
</script>

使用 vue-print-nb 插件

对于更复杂的打印需求，可以使用专门为 Vue 设计的打印插件 vue-print-nb。

vue实现打印

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

vue实现打印

import Print from 'vue-print-nb'

Vue.use(Print);

<template>
  <div>
    <div id="printContent">要打印的内容</div>
    <button v-print="'#printContent'">打印</button>
  </div>
</template>

打印 PDF 文件

如果需要打印 PDF 文件，可以使用 PDF.js 或其他 PDF 库来实现。

methods: {
  printPDF(url) {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = url;
    document.body.appendChild(iframe);
    iframe.onload = function() {
      iframe.contentWindow.print();
    };
  }
}