当前位置：首页 > VUE

vue前端实现打印功能

2026-03-27 00:44:54VUE

Vue 前端实现打印功能的方案

使用 window.print() 方法

在 Vue 中可以直接调用浏览器的打印 API window.print() 实现基础打印功能。这种方法会打印整个页面内容。

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

使用 vue-print-nb 插件

vue-print-nb 是一个专门为 Vue 设计的打印插件，可以方便地实现局部打印功能。

安装：

npm install vue-print-nb --save

使用：

import Print from 'vue-print-nb'

Vue.use(Print);

// 模板中使用
<template>
  <div id="printArea">
    <!-- 要打印的内容 -->
  </div>
  <button v-print="'#printArea'">打印</button>
</template>

使用 html2canvas + jsPDF 实现复杂打印

对于需要将 DOM 转换为 PDF 的场景，可以使用 html2canvas 和 jsPDF 组合方案。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

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

methods: {
  async printPDF() {
    const element = document.getElementById('printArea');
    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');
  }
}

使用 CSS 控制打印样式

通过 @media print 可以专门为打印设置样式，隐藏不需要打印的元素。

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

打印特定表格内容

对于表格打印，可以提取数据并生成打印专用视图：

vue前端实现打印功能

methods: {
  printTable() {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
      <html>
        <head>
          <title>打印表格</title>
          <style>
            table { width: 100%; border-collapse: collapse; }
            th, td { border: 1px solid #000; padding: 8px; }
          </style>
        </head>
        <body>
          <table>
            ${this.tableData.map(row => `
              <tr>
                ${Object.values(row).map(cell => `<td>${cell}</td>`).join('')}
              </tr>
            `).join('')}
          </table>
        </body>
      </html>
    `);
    printWindow.document.close();
    printWindow.print();
  }
}