当前位置：首页 > VUE

vue如何实现打印

2026-02-19 18:10:16VUE

实现 Vue 打印功能的方法

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

使用 window.print() 方法

最简单的打印方式是调用浏览器原生 API window.print()，但这种方式会打印整个页面，无法精确控制打印区域。

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

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，可以精确控制打印区域。

安装插件：

vue如何实现打印

npm install vue-print-nb --save

使用示例：

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

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

使用 html2canvas 和 jsPDF 组合

对于需要将 HTML 转换为 PDF 再打印的场景，可以使用 html2canvas 和 jsPDF 组合。

安装依赖：

vue如何实现打印

npm install html2canvas jspdf --save

实现代码：

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

methods: {
  async printPDF() {
    const element = document.getElementById('printArea')
    const canvas = await html2canvas(element)
    const imgData = canvas.toDataURL('image/png')
    const pdf = new jsPDF()
    pdf.addImage(imgData, 'PNG', 0, 0)
    pdf.save('print.pdf')
    // 或者直接打印
    // pdf.autoPrint()
  }
}

使用 CSS 控制打印样式

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

@media print {
  .no-print {
    display: none;
  }
  .print-only {
    display: block;
  }
}

使用 iframe 打印特定内容

通过创建一个隐藏的 iframe 来打印特定内容，避免影响主页面。

methods: {
  printSpecificContent(html) {
    const frame = document.createElement('iframe')
    frame.style.display = 'none'
    document.body.appendChild(frame)
    frame.contentDocument.write(html)
    frame.contentDocument.close()
    frame.contentWindow.focus()
    frame.contentWindow.print()
    document.body.removeChild(frame)
  }
}