前端打印
1.定义变量配置dom模板
let template = ''
this.Inselect.forEach(item => {
template +=
`<div>
<div class="print-top">
<span>案件信息</span>
</div>
<div class="print-box">
<div class="print-left">
<div><span>事件名称:</span><span>${item.eventName}</span></div>
<div><span>报警人:</span><span>${item.person}</span></div>
<div><span>性别:</span><span>${item.gender === 2 ? '女' : '男'}</span></div>
<div><span>年龄:</span><span>${item.age}</span></div>
<div><span>民族/国籍:</span><span>${item.nationality}</span></div>
<div><span>院系/单位:</span><span>${item.department}</span></div>
<div><span>住址:</span><span>${item.address}</span></div>
<div><span>联系电话:</span><span>${item.phone}</span></div>
<div><span>备注:</span><span>${item.mark}</span></div>
</div>
<div class="print-right">
<div><span>事发地点:</span><span>${item.incidentAddress}</span></div>
<div><span>学号:</span><span>${item.studentNum}</span></div>
<div><span>身份证号:</span><span>${item.identityNum}</span></div>
<div><span>是否调取录像:</span><span>${item.isRecode === true ? '是' : '否'}</span></div>
<div><span>案件开始时间:</span><span>${item.alarmTime ? this.$moment(item.alarmTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span></div>
<div><span>案件结束时间:</span><span>${item.endTime ? this.$moment(item.endTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span></div>
<div><span>登记时间:</span><span>${item.createTime ? this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span></div>
<div><span>事件特征:</span><span>${item.description}</span></div>
</div>
</div>
</div>`
})
2.将dom模板配置到打印页面的body中
const el = document.createElement('div')
el.innerHTML = template
document.body.appendChild(el)
3.调用打印方法,完成打印
window.print()
document.body.removeChild(el)
4.注意点(如果只打印配置的dom模板,需要在css中隐藏其他不需要打印的dom,配置方法)
@media print { #app-main { display: none; } }
浙公网安备 33010602011771号