当前位置：首页 > VUE

vue 实现打印功能

2026-02-17 18:46:36VUE

vue 实现打印功能

使用 window.print() 方法

在 Vue 项目中，可以直接调用浏览器的 window.print() 方法实现打印功能。这种方法简单直接，但打印的内容是整个页面。

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

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

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，可以指定打印某个 DOM 元素。

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

<template>
  <div>
    <button v-print="printObj">打印指定区域</button>
    <div id="printArea">
      <!-- 需要打印的内容 -->
      <h1>打印内容标题</h1>
      <p>这里是需要打印的具体内容。</p>
    </div>
  </div>
</template>

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

export default {
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printArea',
        popTitle: '打印标题'
      }
    };
  }
};
</script>

使用 html2canvas 和 jsPDF 实现自定义打印

如果需要更复杂的打印功能（如生成 PDF 或自定义样式），可以使用 html2canvas 和 jsPDF 库。

安装依赖：

npm install html2canvas jspdf --save

示例代码：

<template>
  <div>
    <button @click="generatePDF">生成PDF并打印</button>
    <div id="pdfContent">
      <!-- 需要打印的内容 -->
      <h1>PDF打印内容</h1>
      <p>这里是自定义打印的内容。</p>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    async generatePDF() {
      const element = document.getElementById('pdfContent');
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save('document.pdf');
    }
  }
};
</script>

使用 CSS 控制打印样式

通过 CSS 的 @media print 可以控制打印时的样式，隐藏不需要打印的元素或调整布局。

vue 实现打印功能

<template>
  <div>
    <button @click="printPage">打印</button>
    <div class="print-content">
      <h1>打印内容</h1>
      <p>这是需要打印的内容。</p>
    </div>
    <div class="no-print">
      这部分内容不会被打印。
    </div>
  </div>
</template>

<style>
@media print {
  .no-print {
    display: none;
  }
  .print-content {
    color: black;
    font-size: 12pt;
  }
}
</style>