当前位置：首页 > VUE

vue实现页面打印

2026-01-16 08:35:03VUE

Vue 实现页面打印的方法

在 Vue 项目中实现页面打印功能可以通过多种方式完成，以下是几种常见的实现方法：

使用 window.print() 方法

调用浏览器原生的打印功能是最简单的方式。创建一个打印按钮，点击时触发打印事件。

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

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

打印特定区域内容

如果只需要打印页面中的特定区域，可以将该区域内容提取出来单独打印。

<template>
  <div>
    <div id="printArea">
      <!-- 需要打印的内容 -->
    </div>
    <button @click="printSpecificArea">打印区域</button>
  </div>
</template>

<script>
export default {
  methods: {
    printSpecificArea() {
      const printContent = document.getElementById('printArea').innerHTML;
      const originalContent = document.body.innerHTML;
      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
}
</script>

使用 CSS 控制打印样式

通过 CSS 的 @media print 规则可以控制打印时的样式表现。

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

使用第三方库

对于更复杂的打印需求，可以使用专门的打印库如 vue-print-nb。

安装：

npm install vue-print-nb --save

使用：

import Print from 'vue-print-nb'

Vue.use(Print);

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

处理打印分页

在打印长内容时，可以通过 CSS 控制分页。

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

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

打印预览优化

在打印前可以调整页面布局，隐藏不需要打印的元素，优化打印效果。

printOptimized() {
  // 隐藏导航等不需要打印的元素
  document.querySelectorAll('.no-print').forEach(el => {
    el.style.display = 'none';
  });

  window.print();

  // 打印完成后恢复显示
  document.querySelectorAll('.no-print').forEach(el => {
    el.style.display = '';
  });
}

以上方法可以根据具体需求选择使用，简单的打印需求使用原生方法即可，复杂需求可以考虑使用第三方库。

vue实现页面打印