当前位置：首页 > VUE

vue页面打印功能实现

2026-02-21 13:45:46VUE

Vue 页面打印功能实现

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

使用 window.print() 方法

通过调用浏览器的原生打印 API window.print() 实现基础打印功能。此方法会打印整个页面内容，适用于简单场景。

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

使用 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 id="printContent">
    <!-- 需要打印的内容 -->
  </div>
  <button v-print="'#printContent'">打印</button>
</template>

使用 html2canvas 和 jsPDF 实现 PDF 打印

如果需要将页面内容转换为 PDF 再打印，可以使用 html2canvas 和 jsPDF 组合。

安装依赖：

npm install html2canvas jspdf --save

实现代码：

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

methods: {
  async printPDF() {
    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('document.pdf');
  }
}

自定义打印样式

通过 CSS 的 @media print 规则自定义打印时的样式，隐藏不需要打印的元素。

@media print {
  .no-print {
    display: none;
  }
  .print-content {
    width: 100%;
  }
}

打印特定区域

如果需要打印页面中的特定区域，可以创建一个隐藏的 iframe，将内容复制到 iframe 中再打印。

vue页面打印功能实现

printSpecificArea() {
  const printContent = document.getElementById('printContent').innerHTML;
  const originalContent = document.body.innerHTML;
  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

以上方法可以根据具体需求选择使用，vue-print-nb 插件适合大多数 Vue 项目的打印需求，而 html2canvas 和 jsPDF 组合适合需要生成 PDF 的场景。