vue实现发票预览

Vue 实现发票预览功能

发票预览功能通常需要结合前端展示和数据处理，以下是实现的具体方法：

使用动态模板渲染

在Vue组件中设计发票的HTML/CSS模板，通过v-for、v-if等指令动态填充数据。例如发票项目列表：

<div class="invoice-preview">
  <div class="header">
    <h2>{{ invoice.title }}</h2>
    <p>编号：{{ invoice.number }}</p>
  </div>

  <table class="items">
    <tr v-for="(item, index) in invoice.items" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.quantity * item.price }}</td>
    </tr>
  </table>

  <div class="total">
    总计：{{ calculateTotal() }}
  </div>
</div>

数据绑定与计算属性

通过Vue的响应式系统管理发票数据，使用计算属性处理合计金额等逻辑：

export default {
  data() {
    return {
      invoice: {
        title: '增值税发票',
        number: 'INV20230001',
        items: [
          { name: '服务费', quantity: 2, price: 500 },
          { name: '产品A', quantity: 1, price: 1200 }
        ]
      }
    }
  },
  methods: {
    calculateTotal() {
      return this.invoice.items.reduce((sum, item) => {
        return sum + (item.quantity * item.price)
      }, 0)
    }
  }
}

PDF导出功能

如需生成PDF，可使用html2pdf.js等库：

import html2pdf from 'html2pdf.js'

export default {
  methods: {
    exportToPDF() {
      const element = document.getElementById('invoice-preview')
      const opt = {
        margin: 10,
        filename: 'invoice.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      }
      html2pdf().from(element).set(opt).save()
    }
  }
}

样式设计

通过CSS确保打印和屏幕显示效果一致：

.invoice-preview {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: white;
}

@media print {
  body * {
    visibility: hidden;
  }
  .invoice-preview, .invoice-preview * {
    visibility: visible;
  }
  .invoice-preview {
    position: absolute;
    left: 0;
    top: 0;
  }
}

第三方组件集成

对于复杂需求，可考虑专用发票组件库如vue-invoice-preview，或使用PDF.js直接渲染已有PDF发票：

import { PDFDocumentProxy } from 'pdfjs-dist'

export default {
  methods: {
    async renderPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.canvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      page.render(renderContext)
    }
  }
}

以上方案可根据实际需求组合使用，动态模板适合定制化发票，PDF方案适合已有模板的渲染。