当前位置：首页 > VUE

vue实现预览打印

2026-03-09 09:46:49VUE

使用vue-print-nb插件实现打印预览

安装vue-print-nb插件：

npm install vue-print-nb --save

在main.js中引入并注册：

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

在组件中使用：

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

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printContent',
        popTitle: '打印标题', // 打印窗口标题
        extraCss: '', // 附加CSS
        extraHead: '' // 附加头部
      }
    }
  }
}
</script>

使用window.print()原生方法实现

创建打印方法：

methods: {
  handlePrint() {
    const printContent = document.getElementById('printContent').innerHTML
    const originalContent = document.body.innerHTML

    document.body.innerHTML = printContent
    window.print()
    document.body.innerHTML = originalContent
  }
}

添加打印按钮：

<button @click="handlePrint">打印</button>
<div id="printContent">
  <!-- 需要打印的内容 -->
</div>

使用CSS控制打印样式

创建打印专用样式：

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

使用html2canvas+jspdf实现PDF导出

安装依赖：

npm install html2canvas jspdf

实现方法：

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

methods: {
  exportPDF() {
    html2canvas(document.querySelector('#printContent')).then(canvas => {
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF('p', 'mm', 'a4')
      const imgWidth = 190
      const pageHeight = 277
      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('file.pdf')
    })
  }
}

使用iframe实现打印隔离

创建iframe打印方法：

vue实现预览打印

methods: {
  printWithIframe() {
    const content = document.getElementById('printContent').innerHTML
    const iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    document.body.appendChild(iframe)

    const frameDoc = iframe.contentWindow || iframe.contentDocument
    if (frameDoc.document) {
      frameDoc = frameDoc.document
    }

    frameDoc.open()
    frameDoc.write(content)
    frameDoc.close()

    setTimeout(() => {
      iframe.contentWindow.focus()
      iframe.contentWindow.print()
      document.body.removeChild(iframe)
    }, 200)
  }
}

这些方法提供了从简单到复杂的多种打印预览实现方案，可以根据项目需求选择合适的方案。对于简单的打印需求，推荐使用vue-print-nb插件或原生window.print方法；对于需要更复杂控制的情况，可以考虑html2canvas+jspdf方案。

标签: vue