当前位置：首页 > VUE

vue实现打印插件

2026-02-20 08:36:05VUE

Vue 打印插件实现方案

在Vue项目中实现打印功能，可通过原生API或第三方库完成。以下是几种常见方案：

使用原生window.print()方法

直接调用浏览器打印API实现基础打印功能：

// 在Vue组件中
methods: {
  printContent() {
    window.print()
  }
}

需配合CSS媒体查询控制打印样式：

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

使用vue-print-nb插件

安装流行打印插件vue-print-nb：

npm install vue-print-nb --save

全局注册或局部使用：

// 全局注册
import Print from 'vue-print-nb'
Vue.use(Print)

// 局部使用
import print from 'vue-print-nb'
export default {
  directives: {
    print
  }
}

模板中使用指令：

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

<script>
export default {
  data() {
    return {
      printObj: {
        id: "printContent",
        popTitle: '打印标题',  // 打印窗口标题
        extraCss: 'https://example.com/print.css', // 额外CSS
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' // 额外head标签
      }
    }
  }
}
</script>

使用html2canvas + jsPDF实现PDF打印

组合使用两个库实现HTML转PDF打印：

npm install html2canvas jspdf

组件实现代码：

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

methods: {
  async printPDF() {
    const element = document.getElementById('print-area')
    const canvas = await html2canvas(element, {
      scale: 2 // 提高分辨率
    })

    const pdf = new jsPDF('p', 'mm', 'a4')
    const imgData = canvas.toDataURL('image/png')
    const imgWidth = 190 // A4纸宽度
    const pageHeight = 277 // A4纸高度
    const imgHeight = canvas.height * imgWidth / canvas.width

    let heightLeft = imgHeight
    let position = 10 // 页边距

    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight)
    heightLeft -= pageHeight

    while (heightLeft >= 0) {
      position = heightLeft - imgHeight
      pdf.addPage()
      pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight)
      heightLeft -= pageHeight
    }

    pdf.save('document.pdf')
  }
}

打印优化技巧

添加打印专用样式表确保布局正确：

<link rel="stylesheet" media="print" href="/print.css">

处理分页问题：

@media print {
  .page-break {
    page-break-after: always;
  }
}

处理背景打印：

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

特殊场景处理

打印动态内容前确保数据加载：

async printWithData() {
  await this.loadData()
  this.$nextTick(() => {
    window.print()
  })
}

处理iframe打印：

vue实现打印插件

printIframe() {
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  document.body.appendChild(iframe)

  const doc = iframe.contentWindow.document
  doc.write('<html><body>' + document.getElementById('content').innerHTML + '</body></html>')
  doc.close()

  iframe.contentWindow.focus()
  iframe.contentWindow.print()

  setTimeout(() => {
    document.body.removeChild(iframe)
  }, 1000)
}

以上方案可根据具体需求选择使用，vue-print-nb适合简单场景，html2canvas+jsPDF组合适合需要生成PDF的场景，原生API适合基础打印需求。