当前位置：首页 > VUE

vue页面打印功能实现

2026-01-20 22:07:14VUE

vue页面打印功能实现

在Vue项目中实现页面打印功能，可以通过以下几种方法：

使用window.print()方法

直接调用浏览器的打印API是最简单的方式：

methods: {
  printPage() {
    window.print();
  }
}

这种方法会打印整个页面，适用于需要打印整个页面的场景。

打印特定区域

如果需要打印页面中的特定区域，可以通过CSS控制：

<div class="print-area" ref="printArea">
  <!-- 需要打印的内容 -->
</div>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .print-area, .print-area * {
    visibility: visible;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

methods: {
  printArea() {
    const printContent = this.$refs.printArea.innerHTML;
    const originalContent = document.body.innerHTML;

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

使用vue-print-nb插件

安装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="printMe">
  <!-- 需要打印的内容 -->
</div>

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

处理打印样式问题

可以通过单独的打印样式表控制打印效果：

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

或者在组件样式中使用@media print：

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

打印PDF

如果需要生成PDF再打印，可以使用html2pdf.js：

npm install html2pdf.js

使用示例：

import html2pdf from 'html2pdf.js'

methods: {
  exportToPDF() {
    const element = document.getElementById('print-content');
    const opt = {
      margin: 1,
      filename: 'document.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    html2pdf().from(element).set(opt).save();
  }
}

以上方法可以根据具体需求选择使用，对于简单的打印需求，window.print()方法足够；对于复杂的打印需求，建议使用专门的打印插件或库。

vue页面打印功能实现