前端打印

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;
  }
}

 

posted @ 2019-08-08 10:13  格里兹曼  阅读(333)  评论(0编辑  收藏  举报