当前位置：首页 > VUE

vue实现发票打印

2026-01-17 13:07:51VUE

vue实现发票打印的方法

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

使用window.print()方法

创建一个专门用于打印的组件或页面，利用CSS控制打印样式。

<template>
  <div class="invoice-print">
    <div class="invoice-content">
      <!-- 发票内容 -->
      <h3>发票抬头</h3>
      <p>金额：100元</p>
    </div>
    <button @click="printInvoice">打印发票</button>
  </div>
</template>

<script>
export default {
  methods: {
    printInvoice() {
      window.print();
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .invoice-content, .invoice-content * {
    visibility: visible;
  }
  .invoice-content {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

使用html2canvas和jsPDF库

将HTML内容转换为PDF进行打印。

npm install html2canvas jspdf

<template>
  <div>
    <div id="invoice" ref="invoice">
      <!-- 发票内容 -->
    </div>
    <button @click="exportToPDF">导出PDF</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    async exportToPDF() {
      const element = this.$refs.invoice;
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save('invoice.pdf');
    }
  }
}
</script>

使用打印专用CSS

通过CSS控制打印时的页面布局和样式。

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    font-size: 12pt;
  }
  .no-print {
    display: none;
  }
}

使用第三方打印插件

如vue-print-nb插件简化打印流程。

npm install vue-print-nb

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

<template>
  <div id="printArea">
    <!-- 发票内容 -->
  </div>
  <button v-print="printObj">打印</button>
</template>

<script>
export default {
  data() {
    return {
      printObj: {
        id: 'printArea',
        popTitle: '发票打印'
      }
    }
  }
}
</script>