当前位置：首页 > VUE

vue实现打印功能

2026-01-17 16:30:35VUE

vue实现打印功能的几种方法

使用window.print()方法

在Vue组件中直接调用浏览器原生打印API，适合简单打印需求

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

需要配合CSS媒体查询隐藏不需要打印的元素

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

使用vue-print-nb插件

安装插件：

npm install vue-print-nb --save

在main.js中引入：

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

模板中使用：

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

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

使用html2canvas + jsPDF库

适合需要将DOM转换为PDF打印的场景安装依赖：

npm install html2canvas jspdf --save

实现代码：

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

methods: {
  async printPDF() {
    const element = document.getElementById('print-area')
    const canvas = await html2canvas(element)
    const imgData = canvas.toDataURL('image/png')
    const pdf = new jsPDF('p', 'mm', 'a4')
    const imgProps = pdf.getImageProperties(imgData)
    const pdfWidth = pdf.internal.pageSize.getWidth()
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
    pdf.save('document.pdf')
  }
}

使用iframe打印

创建隐藏iframe实现局部打印：

methods: {
  printByIframe() {
    const content = document.getElementById('print-area').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(`
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            /* 打印样式 */
          </style>
        </head>
        <body>${content}</body>
      </html>
    `)
    frameDoc.close()
    setTimeout(() => {
      iframe.contentWindow.focus()
      iframe.contentWindow.print()
      document.body.removeChild(iframe)
    }, 200)
  }
}

打印样式优化

创建专门的打印样式表确保打印效果：

vue实现打印功能

@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  @page {
    size: auto;
    margin: 0mm;
  }
}

以上方法可根据具体需求选择，简单打印推荐使用vue-print-nb插件，复杂需求可考虑html2canvas方案或iframe方案。