下面是一个适配 Vue2 的打印模板你可以直接复制到项目中使用也可以根据需要微调样式。template div classprint-container idprint-content table classprint-table border1 cellpadding5 cellspacing0 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 colspan5{{ formData.reason }}/td /tr !-- 工作交接 -- tr td rowspan2工作交接/td td备注培训资料、密码、文件等/td td colspan4审查人签字{{ formData.reviewer1 }}/td /tr tr td备注工资正常发放/td td colspan4审核人签字{{ formData.reviewer2 }}br审批人签字{{ formData.approver }}/td /tr !-- 电脑交接 -- tr td电脑交接/td td电脑、鼠标、键盘等/td td colspan4交接人签字{{ formData.handoverPerson }}/td /tr !-- 人力资源综合办公室 -- tr td人力资源综合办公室/td td饭卡、胸卡、笔、本、钥匙、宿舍等br离职类别{{ formData.leaveType }}/td td colspan4签字{{ formData.hrSign }}/td /tr /tbody /table !-- 备注说明 -- div classnotes p备注须严格按照《科技有限公司审批权限分配表》执行审批签字/p p1、您已移交一切工作内容及公司物品给部门主管指定人员并保证日后不泄露公司相关保密规定内容。/p /div !-- 确认签字 -- div classconfirm-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。