当前位置：首页 > VUE

vue中实现打印功能

2026-02-20 16:16:39VUE

使用window.print()实现基础打印

在Vue组件中直接调用浏览器原生打印API：

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

这种方法会打印整个网页，适合打印简单页面内容。

使用iframe实现局部打印

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

vue中实现打印功能

printPartial() {
  const printContent = document.getElementById('print-area').innerHTML
  const frame = document.createElement('iframe')
  frame.style.display = 'none'
  document.body.appendChild(frame)

  const frameDoc = frame.contentDocument || frame.contentWindow.document
  frameDoc.open()
  frameDoc.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>打印</title>
        <style>@media print{...}</style>
      </head>
      <body>${printContent}</body>
    </html>
  `)
  frameDoc.close()

  setTimeout(() => {
    frame.contentWindow.focus()
    frame.contentWindow.print()
    document.body.removeChild(frame)
  }, 300)
}

使用vue-print-nb插件

安装插件：

npm install vue-print-nb --save

在Vue中使用：

vue中实现打印功能

import Print from 'vue-print-nb'

Vue.use(Print)

// 模板中使用
<button v-print="'#print-area'">打印</button>
<div id="print-area">打印内容</div>

自定义打印样式

通过CSS媒体查询优化打印效果：

@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .no-print {
    display: none !important;
  }
}

处理分页和页眉页脚

通过CSS控制打印分页：

@media print {
  .page-break {
    page-break-after: always;
  }
  @page {
    size: A4;
    margin: 1cm;
    @top-left {
      content: element(pageHeader);
    }
    @bottom-right {
      content: "第" counter(page) "页";
    }
  }
}

使用PDF打印

结合html2pdf.js生成PDF后打印：

import html2pdf from 'html2pdf.js'

methods: {
  exportPDF() {
    const element = document.getElementById('print-area')
    const opt = {
      margin: 10,
      filename: 'document.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    }
    html2pdf().from(element).set(opt).save()
  }
}