当前位置：首页 > VUE

vue实现页面打印功能

2026-02-21 14:06:05VUE

实现页面打印功能的方法

在Vue中实现页面打印功能可以通过以下几种方式完成，每种方式适用于不同的场景。

使用window.print()方法

直接调用浏览器的打印API是最简单的方式。创建一个打印按钮，点击时触发打印当前页面。

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

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

打印特定区域内容

如果只需要打印页面中的特定区域，可以将该区域内容提取出来，放入一个隐藏的iframe中进行打印。

<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>

使用vue-print-nb插件

vue-print-nb是一个专门为Vue设计的打印插件，使用简单且功能强大。

vue实现页面打印功能

安装插件：

npm install vue-print-nb --save

使用示例：

<template>
  <div id="printMe">
    <!-- 需要打印的内容 -->
    <h1>打印测试</h1>
    <p>这是一些需要打印的内容</p>
  </div>
  <button v-print="'printMe'">打印</button>
</template>

<script>
import print from 'vue-print-nb'

export default {
  directives: {
    print
  }
}
</script>

自定义打印样式

通过CSS媒体查询可以自定义打印时的样式，隐藏不需要打印的元素或调整布局。

vue实现页面打印功能

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

  body {
    font-size: 12pt;
    color: #000;
  }
}

打印PDF文件

如果需要生成PDF文件而不是直接打印，可以使用jsPDF等库。

安装jsPDF：

npm install jspdf --save

使用示例：

<template>
  <button @click="generatePDF">生成PDF</button>
</template>

<script>
import jsPDF from 'jspdf'

export default {
  methods: {
    generatePDF() {
      const doc = new jsPDF()
      doc.text('Hello world!', 10, 10)
      doc.save('document.pdf')
    }
  }
}
</script>

选择哪种方法取决于具体需求，简单的打印需求可以使用原生API，复杂需求则可以考虑专用插件或库。