h5内嵌h5

最新推荐文章于 2023-05-29 14:49:12 发布

朝歌233

最新推荐文章于 2023-05-29 14:49:12 发布

阅读量1.8k

点赞数 3

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/qq_53208184/article/details/126667893

版权

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">姓&emsp;&emsp;名：</span>${info.patient_name}</p>
              <p><span class="item_name">年&emsp;&emsp;龄：</span>${info.age}</p>
              <p><span class="item_name">性&emsp;&emsp;别：</span>${genderFilter(info.gender)}</p>
              <p><span class="item_name">住&ensp;院&ensp;号：</span>${info.medical_no}</p>
              <p><span class="item_name">床&emsp;&emsp;号：</span>${info.bed_no}号床</p>
            </div>
            <div class="userInfo">
              <p><span class="item_name">科&emsp;&emsp;室：</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;
    },