当前位置：首页 > VUE

vue实现打印

2026-03-07 15:16:48VUE

Vue 实现打印功能的方法

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

使用 window.print() 方法

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

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

打印特定区域

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

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

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

使用 vue-print-nb 插件

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

安装插件：

vue实现打印

npm install vue-print-nb --save

在 main.js 中引入：

import Print from 'vue-print-nb'
Vue.use(Print)

在组件中使用：

<template>
  <div id="print-content">
    需要打印的内容
  </div>
  <button v-print="printObj">打印</button>
</template>

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

使用 html2canvas 和 jsPDF 生成 PDF

对于需要更复杂的打印需求，可以结合 html2canvas 和 jsPDF 库将 HTML 内容转换为 PDF 后再打印。

vue实现打印

安装依赖：

npm install html2canvas jspdf --save

实现代码：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

methods: {
  generatePDF() {
    const element = document.getElementById('pdf-content')
    html2canvas(element).then(canvas => {
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF()
      pdf.addImage(imgData, 'PNG', 0, 0)
      pdf.save('document.pdf')
    })
  }
}

打印样式优化

为了获得更好的打印效果，可以通过 CSS 的 @media print 规则优化打印样式：

@media print {
  body * {
    visibility: hidden;
  }
  #print-section, #print-section * {
    visibility: visible;
  }
  #print-section {
    position: absolute;
    left: 0;
    top: 0;
  }
}

打印事件处理

可以在打印前后添加事件处理逻辑：

methods: {
  beforePrint() {
    console.log('准备打印')
  },
  afterPrint() {
    console.log('打印完成')
  },
  printWithEvents() {
    window.onbeforeprint = this.beforePrint
    window.onafterprint = this.afterPrint
    window.print()
  }
}

选择哪种方法取决于具体需求。对于简单打印需求，直接使用 window.print() 或 vue-print-nb 插件即可；对于复杂需求，可能需要结合 html2canvas 和 jsPDF 等库实现更灵活的打印功能。

标签: vue