当前位置：首页 > VUE

vue中实现打印功能

2026-01-20 00:15:47VUE

在Vue中实现打印功能

使用window.print()方法

在Vue组件中可以直接调用浏览器的打印API实现基本打印功能。创建一个方法触发打印：

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

在模板中添加按钮触发该方法：

<button @click="handlePrint">打印当前页</button>

打印指定区域内容

使用CSS控制打印范围，隐藏不需要打印的元素：

@media print {
  .no-print {
    display: none;
  }
  .print-area {
    display: block !important;
  }
}

在Vue模板中标记需要打印的区域：

<div class="print-area">
  <!-- 需要打印的内容 -->
</div>
<div class="no-print">
  <!-- 不需要打印的内容 -->
</div>

使用vue-print-nb插件

安装打印插件可以更方便地控制打印：

vue中实现打印功能

npm install vue-print-nb --save

在main.js中引入并注册插件：

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

在组件中使用v-print指令：

<button v-print="printObj">打印</button>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printArea',  // 要打印的DOM ID
        popTitle: '打印标题', // 打印对话框标题
        extraCss: 'https://example.com/print.css' // 附加CSS
      }
    }
  }
}
</script>

打印PDF文件

使用jsPDF库生成PDF并打印：

vue中实现打印功能

npm install jspdf --save

在Vue组件中使用：

import jsPDF from 'jspdf';

methods: {
  printPDF() {
    const doc = new jsPDF();
    doc.text('打印内容', 10, 10);
    doc.autoPrint(); // 自动打印
    doc.save('document.pdf');
  }
}

打印表格数据

对于表格数据，可以先用html2canvas转换为图片再打印：

npm install html2canvas --save

实现方法：

import html2canvas from 'html2canvas';

methods: {
  async printTable() {
    const element = document.getElementById('table-to-print');
    const canvas = await html2canvas(element);
    const dataUrl = canvas.toDataURL();
    const windowContent = `<img src="${dataUrl}">`;
    const printWindow = window.open('', '', 'width=800,height=600');
    printWindow.document.write(windowContent);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
  }
}