当前位置：首页 > VUE

vue中实现打印

2026-01-19 04:22:55VUE

Vue 中实现打印功能的方法

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

使用 window.print() 方法

最简单的打印方式是直接调用浏览器的打印 API window.print()。这种方法会打印整个页面内容。

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

打印特定区域内容

如果需要打印页面中的特定区域，可以通过 CSS 控制打印内容。创建一个打印样式表，隐藏不需要打印的元素。

<template>
  <div>
    <div class="no-print">这部分不会被打印</div>
    <div class="print-area">这部分会被打印</div>
    <button @click="printSpecificArea">打印特定区域</button>
  </div>
</template>

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

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，使用起来非常方便。

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

import Print from 'vue-print-nb'

Vue.use(Print);

模板中使用：

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

使用 html2canvas 和 jsPDF 生成 PDF

对于更复杂的打印需求，可以先将 DOM 转换为 canvas，再生成 PDF 进行打印。

安装依赖：

npm install html2canvas jspdf

实现代码：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

methods: {
  async printWithPDF() {
    const element = document.getElementById('printContent');
    const canvas = await html2canvas(element);
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('print.pdf');
    // 或者直接打印
    // pdf.autoPrint();
  }
}

打印表格数据

打印表格数据时，可以创建一个隐藏的打印专用表格，只包含必要的数据。

vue中实现打印

<template>
  <div>
    <table id="printTable" style="display:none;">
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
    <button @click="printTable">打印表格</button>
  </div>
</template>

<script>
methods: {
  printTable() {
    const printWindow = window.open('', '_blank');
    printWindow.document.write('<html><head><title>打印表格</title></head><body>');
    printWindow.document.write(document.getElementById('printTable').outerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  }
}
</script>