vue实现发票预览

实现发票预览功能

在Vue中实现发票预览功能，可以通过多种方式实现，包括使用PDF预览、HTML模板渲染或第三方库。以下是几种常见方法：

使用PDF预览

1. 安装pdf.js库

   npm install pdfjs-dist

2. 创建PDF预览组件

   <template>
     <div>
       <canvas ref="pdfCanvas"></canvas>
     </div>
   </template>
   
   <script>
   import * as pdfjsLib from 'pdfjs-dist'
   
   export default {
     props: ['pdfUrl'],
     mounted() {
       this.loadPDF()
     },
     methods: {
       async loadPDF() {
         const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
         const pdf = await loadingTask.promise
         const page = await pdf.getPage(1)
         const viewport = page.getViewport({ scale: 1.0 })
         const canvas = this.$refs.pdfCanvas
         const context = canvas.getContext('2d')
         canvas.height = viewport.height
         canvas.width = viewport.width
         await page.render({
           canvasContext: context,
           viewport: viewport
         }).promise
       }
     }
   }
   </script>

使用HTML模板渲染

1. 创建发票模板组件

   <template>
     <div class="invoice-template">
       <div class="invoice-header">
         <h2>发票</h2>
       </div>
       <div class="invoice-body">
         <div v-for="(item, index) in items" :key="index">
           {{ item.name }} - {{ item.price }}
         </div>
       </div>
       <div class="invoice-footer">
         总计: {{ total }}
       </div>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       items: Array
     },
     computed: {
       total() {
         return this.items.reduce((sum, item) => sum + item.price, 0)
       }
     }
   }
   </script>
   
   <style scoped>
   .invoice-template {
     width: 210mm;
     min-height: 297mm;
     margin: 0 auto;
     padding: 20px;
     border: 1px solid #ddd;
   }
   </style>

使用第三方库

1. 安装vue-html2pdf

   npm install vue-html2pdf

2. 实现PDF导出功能

   <template>
     <div>
       <vue-html2pdf
         :show-layout="false"
         :float-layout="true"
         :enable-download="true"
         :preview-modal="true"
         filename="invoice"
         :paginate-elements-by-height="1400"
         :pdf-quality="2"
         pdf-format="a4"
         pdf-orientation="portrait"
         pdf-content-width="800px"
       >
         <section slot="pdf-content">
           <!-- 发票HTML内容 -->
           <invoice-template :items="invoiceItems" />
         </section>
       </vue-html2pdf>
     </div>
   </template>
   
   <script>
   import VueHtml2pdf from 'vue-html2pdf'
   import InvoiceTemplate from './InvoiceTemplate.vue'
   
   export default {
     components: {
       VueHtml2pdf,
       InvoiceTemplate
     },
     data() {
       return {
         invoiceItems: [
           { name: '商品A', price: 100 },
           { name: '商品B', price: 200 }
         ]
       }
     }
   }
   </script>

注意事项

1. 响应式设计 确保发票模板在不同设备上显示正常，特别是打印时。

2. 打印样式 添加专门的打印样式表：

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

3. 数据安全 敏感数据应通过后端生成预览，避免在前端暴露完整数据。

4. 性能优化 大量数据渲染时考虑分页或虚拟滚动。

   

以上方法可根据实际需求选择或组合使用，HTML模板方式适合简单发票，PDF方式更适合需要保持格式一致性的场景。