当前位置：首页 > VUE

vue怎么实现打印

2026-02-18 22:20:31VUE

实现 Vue 打印功能的方法

使用 window.print() 方法

在 Vue 中可以直接调用浏览器原生的 window.print() 方法实现打印功能。这种方法简单但灵活性较低，会打印整个页面。

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

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，可以打印指定区域的内容。

安装：

npm install vue-print-nb --save

使用：

vue怎么实现打印

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

// 模板中使用
<template>
  <div id="printArea">
    <!-- 要打印的内容 -->
  </div>
  <button v-print="'#printArea'">打印</button>
</template>

使用 html2canvas 和 jsPDF 实现 PDF 打印

这种方法可以将 HTML 内容先转换为 canvas，再生成 PDF 进行打印。

安装依赖：

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;
  }
}

打印特定表格数据

如果需要打印表格数据，可以先将其转换为 HTML 表格，再使用上述方法打印。

methods: {
  printTable(data) {
    let html = '<table border="1"><tr>'
    // 添加表头
    Object.keys(data[0]).forEach(key => {
      html += `<th>${key}</th>`
    })
    html += '</tr>'

    // 添加数据行
    data.forEach(row => {
      html += '<tr>'
      Object.values(row).forEach(val => {
        html += `<td>${val}</td>`
      })
      html += '</tr>'
    })

    html += '</table>'

    const printWindow = window.open('', '', 'height=600,width=800')
    printWindow.document.write(html)
    printWindow.document.close()
    printWindow.focus()
    printWindow.print()
    printWindow.close()
  }
}