当前位置：首页 > VUE

vue前端实现打印功能

2026-02-09 15:59:53VUE

vue前端实现打印功能的方法

使用window.print()方法

在Vue中可以通过调用浏览器原生API window.print() 实现打印功能。这种方法简单直接，但打印内容为整个页面。

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

打印指定区域内容

若只需打印页面特定区域，可通过CSS控制隐藏非打印内容，或新建iframe实现局部打印。

printPartial() {
  const printContent = document.getElementById('printArea').innerHTML
  const originalContent = document.body.innerHTML
  document.body.innerHTML = printContent
  window.print()
  document.body.innerHTML = originalContent
}

使用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="printMe">
    <!-- 打印内容 -->
  </div>
  <button v-print="'#printMe'">打印</button>
</template>

使用html2canvas+jspdf实现PDF打印

此方案先将DOM转为canvas，再生成PDF进行打印。

vue前端实现打印功能

安装依赖：

npm install html2canvas jspdf --save

实现代码：

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

export default {
  methods: {
    async printPDF() {
      const element = document.getElementById('pdfContent')
      const canvas = await html2canvas(element)
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF()
      pdf.addImage(imgData, 'PNG', 0, 0)
      pdf.save('document.pdf')
    }
  }
}

打印样式控制

通过@media print媒体查询可自定义打印样式：

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