Vue2 web浏览器打印模板
下面是一个适配 Vue2 的打印模板，你可以直接复制到项目中使用，也可以根据需要微调样式。
<template> <div class="print-container" id="print-content"> <table class="print-table" border="1" cellpadding="5" cellspacing="0"> <tbody> <!-- 基本信息行 --> <tr> <td>姓名</td> <td>{{ formData.name }}</td> <td>部门</td> <td>{{ formData.department }}</td> <td>职务</td> <td>{{ formData.position }}</td> </tr> <tr> <td>入职日期</td> <td>{{ formData.entryDate }}</td> <td>申请时间</td> <td>{{ formData.applyDate }}</td> <td>离职时间</td> <td>{{ formData.leaveDate }}</td> </tr> <tr> <td>离职原因</td> <td colspan="5">{{ formData.reason }}</td> </tr> <!-- 工作交接 --> <tr> <td rowspan="2">工作交接</td> <td>备注：培训资料、密码、文件等</td> <td colspan="4">审查人签字：{{ formData.reviewer1 }}</td> </tr> <tr> <td>备注：工资正常发放</td> <td colspan="4">审核人签字：{{ formData.reviewer2 }}<br>审批人签字：{{ formData.approver }}</td> </tr> <!-- 电脑交接 --> <tr> <td>电脑交接</td> <td>电脑、鼠标、键盘等</td> <td colspan="4">交接人签字：{{ formData.handoverPerson }}</td> </tr> <!-- 人力资源综合办公室 --> <tr> <td>人力资源综合办公室</td> <td>饭卡、胸卡、笔、本、钥匙、宿舍等<br>离职类别：{{ formData.leaveType }}</td> <td colspan="4">签字：{{ formData.hrSign }}</td> </tr> </tbody> </table> <!-- 备注说明 --> <div class="notes"> <p>备注：须严格按照《科技有限公司审批权限分配表》执行审批签字</p> <p>1、您已移交一切工作内容及公司物品给部门主管指定人员，并保证日后不泄露公司相关保密规定内容。</p> </div> <!-- 确认签字 --> <div class="confirm-sign"> <span>离职者确认签字：__________</span> <span>年 月 日</span> </div> </div> </template> <script> export default { name: 'ResignationPrint', data() { return { formData: { name: 'xxx', department: '北京组', position: '前端开发', entryDate: '2024年1月26日', applyDate: '2026年1月27日', leaveDate: '2026年1月27日', reason: '跟公司协商一致申请离职，望领导批准！', reviewer1: 'XXX', reviewer2: 'XXX', approver: 'XXX', handoverPerson: '', leaveType: '辞职', hrSign: '' } } }, methods: { // 打印方法 handlePrint() { // 隐藏页面其他元素，只打印 #print-content const printContent = document.getElementById('print-content').innerHTML const oldContent = document.body.innerHTML document.body.innerHTML = printContent window.print() document.body.innerHTML = oldContent window.location.reload() // 恢复页面 } } } </script> <style scoped> .print-container { width: 210mm; /* A4宽度 */ margin: 0 auto; padding: 20px; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; } .print-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .print-table td { border: 1px solid #000; text-align: left; vertical-align: middle; } .notes { margin: 20px 0; line-height: 1.6; font-size: 13px; } .confirm-sign { margin-top: 30px; text-align: right; } /* 打印样式优化 */ @media print { body { margin: 0; padding: 0; } .print-container { width: 100%; padding: 0; } } </style>使用说明
- 把
formData里的硬编码数据替换成你从接口获取的真实数据即可。 - 点击打印按钮时，调用
handlePrint方法，它会自动生成打印预览。 - 样式部分已适配 A4 纸打印，如需调整字体、间距或边框，可直接修改 CSS。