当前位置：首页 > VUE

vue 实现打印页面

2026-01-16 01:08:28VUE

实现 Vue 页面打印功能

使用 window.print() 方法

在 Vue 中可以直接调用浏览器的打印 API 实现基本打印功能。创建一个打印按钮，绑定点击事件调用 window.print()。

<template>
  <button @click="printPage">打印页面</button>
</template>

<script>
export default {
  methods: {
    printPage() {
      window.print();
    }
  }
}
</script>

打印特定区域

如果只需要打印页面中的特定部分，可以通过 CSS 控制打印内容。创建一个专门用于打印的样式表。

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

在 Vue 模板中标记需要打印的区域：

<template>
  <div>
    <div class="no-print">不打印的内容</div>
    <div class="print-area">需要打印的内容</div>
    <button @click="printPage">打印</button>
  </div>
</template>

使用 vue-print-nb 插件

对于更复杂的打印需求，可以使用专门为 Vue 开发的打印插件 vue-print-nb。

安装插件：

vue 实现打印页面

npm install vue-print-nb --save

在 main.js 中引入并使用：

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

在组件中使用：

<template>
  <div id="printContent">
    <!-- 打印内容 -->
    <p>这是要打印的内容</p>
  </div>
  <button v-print="'#printContent'">打印</button>
</template>

打印样式优化

为打印内容添加专门的样式，确保打印效果符合预期。可以在 CSS 中设置打印专用的尺寸和边距。

vue 实现打印页面

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    padding: 10mm;
  }
}

处理打印分页

对于长内容需要分页的情况，可以使用 CSS 的 page-break 属性控制分页位置。

.page-break {
  page-break-after: always;
}

在需要分页的位置添加分页元素：

<div class="page-break"></div>

打印前数据处理

在打印前可能需要处理数据或调整界面状态，可以在打印方法中添加预处理逻辑。

methods: {
  printPage() {
    // 打印前处理数据
    this.prepareForPrint();

    // 使用 setTimeout 确保 DOM 更新完成
    setTimeout(() => {
      window.print();
    }, 100);
  },
  prepareForPrint() {
    // 数据处理逻辑
  }
}

打印后回调

如果需要打印完成后执行某些操作，可以监听 afterprint 事件。

methods: {
  printPage() {
    window.addEventListener('afterprint', this.afterPrint);
    window.print();
  },
  afterPrint() {
    // 打印后执行的操作
    window.removeEventListener('afterprint', this.afterPrint);
  }
}