1.基本介绍：
用于某些打印环境
2.逻辑说明：
将h5内嵌在h5 ，利用v-html
3.具体实现：
<div class="box" ref="content" @click="toPrint"><div v-html="html"></div></div> getHTML() {const info = this.dailyList;this.printList = this.dailyList.charges;this.printList = this.arrayChunk(this.printList, Math.ceil(this.printList.length / 1));function genderFilter(value) {if (value == 'M') return '男';else if (value == 'F') return '女';}console.log('打印列表=>', this.printList);let top = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{padding: 0;margin: 0;font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}.tie{width: 1%;border-left: 2px dashed #000;border-right: 2px dashed #000;padding: 0 10px;margin-right: 10px;font-weight: bold;}#top{display: flex;flex-wrap: wrap;justify-content: space-between;border: 1px solid #000;}#top div{width: 24%;text-align: left;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left: 3px;}.container{max-width: 1920px;min-width: 1024px;text-align: center;margin: 0 auto;/*min-height: 100vh;*/font-size: 22px;}section{flex: 1;display: flex;}section .con{width: 99%;height:380px;overflow: auto;}.tabcon{display: flex;}header,section,footer{text-align: center;}header{/*display: flex;*/align-items: baseline;justify-content: center;text-align: center;}header .title {font-size: 30px;font-weight: 700;margin: 0 0 25px 0;}ul{display: flex;list-style: none;justify-content: flex-start;padding-left: 5px;}ul li{width: 20%;text-align: left;padding: 0 10px;}ul li span{display: inline-block;padding-left: 5px;}ul li p {display: inline-block;margin: 0;width: 80px;}.xiaoji {display: flex;justify-content: flex-end;width: 98.8%;border: 1px solid #000;padding-bottom: 5px;}.money {display: flex;justify-content: space-between;}.admin {/*display: flex;justify-content: flex-end;*/float:right;margin-top:10px;border:none}.admin div {margin-top: 5px;margin-right: 20px;}footer div div {/* width: 33.333333%; */margin-top: 5px;margin-right: 20px;}.table {width: 100%;text-align: center;font-size: 16px;}.table tr td {height: 20px;}/* table:nth-last-child(2) tr:nth-last-child(1) td:nth-last-child(1) {border-right: 1px solid #000;}table:nth-child(2) tr:nth-child(1) td:nth-child(4) {border-right: none;}table:nth-last-child(1) tr td:nth-last-child(1) {/* border-right: 1px solid #000;*/}table:nth-last-child(1) tr:nth-last-child(1) td:nth-last-child(n-4) {border-bottom: 1px solid #000;}table:nth-child(3) tr:nth-child(1) td:nth-last-child(n-4) {border-bottom: none;} */.textLeft {text-align: left;}.textRight {text-align: right;}.table tr th {padding: 7px 7px;height: 50px;font-size: 22px;}.table:nth-last-child(1) tr th:nth-last-child(1) {/* border-right: 1px solid #000;*/}.table tr td{padding: 5px 5px;word-wrap: break-word;}.table tbody tr:hover{background:#F2F6FC;}h2{letter-spacing:5px;margin-bottom: 0;}.zhenduan {display: flex;justify-content: space-between;border-left: 1px solid #000;border-right: 1px solid #000;}.zhenduan div {padding: 6px;}.loginTime,.userInfo{display:flex;justify-content: space-evenly;font-size:16px;margin: 10px 0;}.loginTime p, .userInfo p{text-align: left;margin: 0;width: 17%;}.item_name {font-weight: bold;}.disable{background-color:#ccc;// color:red}</style></head>`;let mid = `<body><div class="container"><header><div class="title">${this.hosName}病人费用住院清单</div></header><div class="loginTime"><p><span class="item_name">姓  名：</span>${info.patient_name}</p><p><span class="item_name">年  龄：</span>${info.age}</p><p><span class="item_name">性  别：</span>${genderFilter(info.gender)}</p><p><span class="item_name">住 院 号：</span>${info.medical_no}</p><p><span class="item_name">床  号：</span>${info.bed_no}号床</p></div><div class="userInfo"><p><span class="item_name">科  室：</span>${info.in_dept}</p><p><span class="item_name">入院日期：</span>${this.$moment(info.in_date).format('YYYY-MM-DD')}</p><p><span class="item_name">住院天数：</span>${info.in_days}天</p><p><span class="item_name">出院日期：</span>${info.out_date || '暂无出院日期'}</p><p><span class="item_name">费用累计：</span>${moneyFormat(info.total_charge, 3)}</p></div><section><div class="con"><div class="tabcon">`;let mid2 = `${(() => {let result = '';this.printList.forEach((item) => {result += `<table border=1 class="table" width="100%" cellspacing="0" cellpadding="0" style="table-layout:fixed"><thead><tr><th>费用日期</th><th style="width: 30%;">项目名称</th><th>项目单价</th><th>项目数量</th><th>项目规格</th><th>项目金额</th></tr></thead><tbody>${(() => {let result = '';item.forEach((v, i) => {result += `<tr><td>${this.$moment(this.date).format('YYYY-MM-DD') || v.charge_time}</td><td>${v.item_name}</td><td>${moneyFormat(v.price)}</td><td>${this.$options.filters['countFormat'](v.quantity)}</td><td>${v.unit}</td><td>${moneyFormat(v.amount)}</td></tr>`;});return result;})(item)}</tbody></table></div></div></section>`;});return result;})()}`;let btn = `<div class="admin" ><button id='print' ref='print' :disabled="printDisabled" class="btn admin"}" @click="goPrint">打印</button></div>`;let bot = `</div></div></body></html>`;let tmp = top + mid + mid2 + bot;// let tmp = top + mid + mid2 + btn + bot;this.html = tmp;// console.log(this.html);return tmp;},
