vue 打印送货单源码

### 使用 Vue 实现打印送货单 为了实现一个基于 Vue 的打印送货单功能，可以创建一个新的组件 `PrintDeliveryNote.vue` 来处理此特定的任务。下面是一个简单的例子来展示如何设计这样一个组件： #### 组件结构概述 该组件主要负责显示送货单的信息，并提供按钮触发浏览器的打印对话框。 ```html <template> <div id="print-delivery-note"> <h2>送货单</h2> <table border="1" cellpadding="5" cellspacing="0" style="width:100%;"> <thead> <tr> <th>产品名称</th> <th>数量</th> <th>单价 (元)</th> <th>总价 (元)</th> </tr> </thead> <tbody> <tr v-for="(item, index) in deliveryItems" :key="index"> <td>{{ item.productName }}</td> <td>{{ item.quantity }}</td> <td>{{ item.unitPrice.toFixed(2) }}</td> <td>{{ (item.unitPrice * item.quantity).toFixed(2) }}</td> </tr> </tbody> </table> <!-- Print Button --> <button @click="handlePrint">打印送货单</button> </div> </template> <script> export default { name: 'PrintDeliveryNote', data() { return { deliveryItems: [ { productName: '商品A', quantity: 3, unitPrice: 98 }, { productName: '商品B', quantity: 7, unitPrice: 45 } ] }; }, methods: { handlePrint() { window.print(); } } }; </script> <style scoped> @media print { body * { visibility:hidden; } #print-delivery-note, #print-delivery-note * { visibility: visible; } #print-delivery-note { position:absolute; top:0; left:0; } } </style> ``` 上述代码展示了如何定义一个用于呈现送货单详情的表格，并通过点击按钮调用浏览器内置的打印功能[^1]。样式部分特别指定了当页面进入打印模式时只显示送货单的内容，隐藏其他不必要的元素。 #### 关键特性解释 - **模板区域**：使用 `<template>` 标签包裹 HTML 结构，其中包含了表头和动态生成的产品列表项。 - **脚本逻辑**：在 `<script>` 部分声明了一个名为 `PrintDeliveryNote` 的 Vue 组件，设置了默认的商品数据集 `deliveryItems` 并实现了 `handlePrint()` 方法用来启动打印操作。 - **样式控制**：利用 CSS 中媒体查询的方式，在实际打印预览或执行打印动作期间调整布局，确保只有送货单被正确渲染出来。 #### 注意事项 对于更复杂的场景，可能还需要考虑更多因素，比如支持多页打印、自定义纸张大小或是优化打印效果等高级需求。