当前位置：首页 > VUE

vue实现自动打印

2026-03-09 08:13:10VUE

Vue 实现自动打印功能

在 Vue 中实现自动打印功能，可以通过以下方法完成：

使用 window.print() 方法

在 Vue 组件中调用浏览器的打印功能，可以通过 window.print() 方法实现。这种方法简单直接，适用于打印整个页面或特定区域。

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

打印特定区域

如果需要打印页面中的特定区域，可以通过 CSS 控制打印内容的显示与隐藏。

<template>
  <div>
    <div class="no-print">这部分内容不会被打印</div>
    <div id="print-area">这部分内容会被打印</div>
    <button @click="printArea">打印指定区域</button>
  </div>
</template>

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

<style>
@media print {
  .no-print {
    display: none;
  }
}
</style>

使用第三方库

如果需要更复杂的打印功能，可以使用第三方库如 vue-print-nb。该库提供了更灵活的打印选项。

安装 vue-print-nb：

npm install vue-print-nb --save

在 Vue 项目中使用：

import Print from 'vue-print-nb';

Vue.use(Print);

在模板中使用：

<template>
  <div>
    <div id="print-content">需要打印的内容</div>
    <button v-print="'#print-content'">打印</button>
  </div>
</template>

自动触发打印

如果需要页面加载后自动触发打印，可以在 mounted 钩子中调用打印方法。

export default {
  mounted() {
    this.printPage();
  },
  methods: {
    printPage() {
      window.print();
    }
  }
}

打印样式优化

通过 CSS 的 @media print 规则可以优化打印效果，隐藏不必要的元素或调整布局。

vue实现自动打印

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