当前位置：首页 > VUE

vue实现页面打印功能

2026-01-20 22:26:59VUE

Vue 实现页面打印功能的方法

使用 window.print() 方法

在 Vue 中可以直接调用浏览器的打印 API window.print() 实现打印功能。这种方法适用于打印整个页面或特定区域。

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

打印特定区域

若需打印页面中的特定部分，可以通过 CSS 控制打印范围。

<div class="print-area">
  <!-- 需要打印的内容 -->
</div>
<button @click="printArea">打印区域</button>

methods: {
  printArea() {
    const printContent = document.querySelector('.print-area').innerHTML;
    const originalContent = document.body.innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
  }
}

使用 vue-print-nb 插件

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

安装插件：

npm install vue-print-nb --save

在 Vue 项目中使用：

import Print from 'vue-print-nb';
Vue.use(Print);

模板中使用：

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

自定义打印样式

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

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

处理打印分页

使用 CSS 的 page-break 属性控制打印分页。

@media print {
  .page-break {
    page-break-after: always;
  }
}

打印 PDF 或其他格式

若需打印为 PDF 或其他格式，可以使用第三方库如 html2pdf 或 jspdf。

安装 html2pdf.js：

npm install html2pdf.js

使用示例：

vue实现页面打印功能

import html2pdf from 'html2pdf.js';

methods: {
  exportToPDF() {
    const element = document.getElementById('printContent');
    html2pdf().from(element).save();
  }
}