当前位置：首页 > VUE

vue 打印功能实现

2026-01-19 16:27:22VUE

Vue 打印功能实现方法

使用 window.print() 方法

在 Vue 中调用原生 JavaScript 的 window.print() 方法是最简单的打印方式。创建一个打印按钮，点击时触发打印当前页面。

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

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

打印指定区域内容

通过 CSS 控制只打印页面的特定区域，隐藏不需要打印的部分。

vue 打印功能实现

<template>
  <div>
    <div class="no-print">不打印的内容</div>
    <div id="printArea">需要打印的内容</div>
    <button @click="printSpecificArea">打印指定区域</button>
  </div>
</template>

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

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

使用 vue-print-nb 插件

安装 vue-print-nb 插件可以更方便地实现打印功能。

npm install vue-print-nb --save

在 Vue 项目中注册插件并使用：

vue 打印功能实现

import Print from 'vue-print-nb'

Vue.use(Print);

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

打印 PDF 文件

如果需要打印 PDF 文件，可以使用浏览器内置的 PDF 查看器打印功能。

<template>
  <button @click="printPDF">打印PDF</button>
</template>

<script>
export default {
  methods: {
    printPDF() {
      window.open('/path/to/file.pdf', '_blank').print();
    }
  }
}
</script>

打印样式优化

通过 CSS 的 @media print 规则优化打印输出的样式。

@media print {
  body {
    margin: 0;
    padding: 0;
    background: white;
    color: black;
  }
  a {
    text-decoration: none;
    color: black;
  }
}