美文网首页
js 实现报表汇总 + 打印报表

js 实现报表汇总 + 打印报表

作者: web30 | 来源:发表于2022-04-16 16:53 被阅读0次
    表格样式
    表格部分
    <el-card shadow="always" class="table-wrap">
      <div class="table" v-loading="isLoading">
        <template>
          <table ref="table" border="1" class="tableDiv" style="border: 1px solid #000;border-collapse: collapse;">
            <tr>
              <td class="th" colspan="8" rowspan="2" style="font-size: 20px; font-weight: 600; text-align: center;">{{ 'xx结算报表-' + titleYear + '年' + titleMonth + '月' }}</td>
            </tr>
            <tr></tr>
            <tr>
              <td class="limitTd">收费员：</td>
              <td class="limitTd"></td>
              <td>起始时间：</td>
              <td colspan="2">{{ tableData.kssj }}</td>
              <td>结束时间：</td>
              <td colspan="2">{{ tableData.jssj }}</td>
            </tr>
            <tr>
              <td colspan="2">收费项目</td>
              <td colspan="2">金额</td>
              <td colspan="1">收费项目</td>
              <td colspan="3">金额</td>
            </tr>
            <tr>
              <td colspan="2">西药费</td>
              <td colspan="2">{{ tableData.xyf }}</td>
              <td colspan="1">诊查费</td>
              <td colspan="3">{{ tableData.zcf }}</td>
            </tr>
            <tr>
              <td colspan="2">检查费</td>
              <td colspan="2">{{ tableData.jcf }}</td>
              <td colspan="1">检验费</td>
              <td colspan="3">{{ tableData.jyf }}</td>
            </tr>
            <tr>
              <td colspan="2">合计：</td>
              <td colspan="6">{{ tableData.wxzsr }}</td>
            </tr>
            <tr>
              <td colspan="1">使用票据号：</td>
              <td colspan="7">{{ tableData.sypjh }}</td>
            </tr>
            <tr>
              <td colspan="1">票据类型</td>
              <td colspan="3">收费净收入</td>
              <td colspan="4">额</td>
            </tr>
            <tr>
              <td colspan="1">微信</td>
              <td colspan="3">{{ tableData.wxzsr }}</td>
              <td colspan="4">0.00</td>
            </tr>
            <tr>
              <td colspan="1">合计：</td>
              <td colspan="3">{{ tableData.wxzsr }}</td>
              <td colspan="4">0.00</td>
            </tr>
            <tr>
              <td colspan="1">本期收入合计：</td>
              <td colspan="3">{{ tableData.wxzsr }}</td>
              <td colspan="4">大写：{{ tableData.totalCapital }}</td>
            </tr>
          </table>
        </template>
      </div>
    </el-card>

    import utils from '@/assets/js/utils'  // 引入格式化金额(大写)

loadStatsData() {
      const date = this.queryParam.date ? this.queryParam.date.split('-') : [0, 0]
      const year = parseInt(date[0])
      const month = parseInt(date[1])
      const params = {
        year: year,
        month: month,
        feeType: this.queryParam.feeType || 0
      }
      this.isLoading = true
      this.$requestInternet.post('/api/xxx', params).then(res => {
        // 格式化金额(大写)
        const totalCapital = utils.toChineseNum(res.wxzsr) 
        this.tableData = Object.assign(res,
          {
            kssj: utils.formatDate(res.kssj, 'yyyy/MM/dd hh:mm '),
            jssj: utils.formatDate(res.jssj, 'yyyy/MM/dd hh:mm '),
            totalCapital: totalCapital
          }
        ) // 转成最终的数据展示在表格里
        this.isLoading = false
      })
      this.titleYear = year
      this.titleMonth = month
    }

    .tableDiv {
  width: 100%;
}
/deep/ .el-descriptions {
  .el-descriptions-item__label.is-bordered-label {
    background: white;
  }
  .el-descriptions__header {
    border: 1px solid #ebeef5;
    padding: 20px 0px;
    margin: 0px;
    border-bottom: none;
  }
  .el-descriptions__title {
    width: 100%;
    text-align: center;
  }
}
.tableDiv {
  td {
    padding: 15px;
    text-align: center;
    word-break: break-all;
  }
  .limitTd {
    width: 180px;
  }
}
    打印报表部分
    printHtml() {
      const iframe = document.createElement('iframe')
      iframe.setAttribute('id', 'iframe')
      iframe.style.border = '0px'
      iframe.style.position = 'absolute'
      iframe.style.width = '0px'
      iframe.style.height = '0px'
      iframe.style.right = '0px'
      iframe.style.top = '0px'

      document.body.appendChild(iframe)
      const iframeWindow = document.getElementById('iframe').contentWindow
      const iframeDocument = iframeWindow.document
      iframeDocument.body.innerHTML = `
        <div style="color: #000;font-size: 14px;border: 1px solid #000;text-align: center;">
          <div style="font-size: 16px;font-weight: bold;padding: 10px;border: 1px solid #000;">互联网医院结算报表-${this.titleYear}年${this.titleMonth}月</div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">收费员：</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px"></div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">起始时间：</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.kssj}</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">结束时间：</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.jssj}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">收费项目</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">金额</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">收费项目</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">金额</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">西药费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.xyf}</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">诊查费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.zcf}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">检查费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.jcf}</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">检验费</div></div>
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">${this.tableData.jyf}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">合计：</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">使用票据号：</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px;word-break: break-all;">${this.tableData.sypjh}</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">票据类型</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">收费净收入</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">额</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">微信</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">0.00</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">合计：</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">0.00</div></div>
          </div>
          <div style="display: flex;">
            <div style="border: 1px solid #000;flex: 1;"><div style="padding: 5px">本期收入合计：</div></div>
            <div style="border: 1px solid #000;flex: 3;"><div style="padding: 5px">${this.tableData.wxzsr}</div></div>
            <div style="border: 1px solid #000;flex: 4;"><div style="padding: 5px">大写：${this.tableData.totalCapital}</div></div>
          </div>
        </div>
      `
      iframeWindow.print()
      iframe.parentNode.removeChild(iframe)
    },

    相关文章

      网友评论

          本文标题：js 实现报表汇总 + 打印报表

          本文链接：https://www.haomeiwen.com/subject/lllhertx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|js 实现报表汇总 + 打印报表|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！