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

作者: web30 | 来源:发表于2022-04-16 16:53 被阅读0次

js 实现报表汇总 + 打印报表
JAVA批量打印报表
门店报表查询
报表工具有哪些打印技术？
Odoo10开发教程九（报表和WebService）
JimuReport积木报表 — API数据源报表制作
JimuReport积木报表1.1.05 版本发布，免费的企业级
Devexpress XtraReports 报表打印创建报表
8、报表打印格式设置
出库发货单报表打印方式

表格样式

表格部分

<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 实现报表汇总 + 打印报表
表格部分打印报表部分
JAVA批量打印报表
不使用工具条上的打印按钮，用java怎么实现批量打印皕杰报表？解决方案：皕杰报表提供了批量打印的工具类Repo...
门店报表查询
1：收款汇总报表管理--门店账款--收银汇总 2：货品销售报表管理--门店销售--品类销售汇总（注意翻页）
报表工具有哪些打印技术？
在 C/S 时代，报表是由应用程序显示的，可以直接操控打印机来实现打印。进入到 B/S 时代后，报表呈现变成浏览器...
Odoo10开发教程九（报表和WebService）
报表报表打印 Odoo 8.0 开始使用新的基于QWeb，Twitter Bootstrap 和 Wkhtmlt...
JimuReport积木报表 — API数据源报表制作
积木报表，一个开源免费的报表工具，像搭建积木一样在线设计报表！功能涵盖数据报表设计、打印设计、图表设计、大屏设计...
JimuReport积木报表1.1.05 版本发布，免费的企业级
项目介绍积木报表，是一款免费的企业级Web报表工具，像搭建积木一样在线设计报表！功能涵盖，数据报表、打印设计、图...
Devexpress XtraReports 报表打印创建报表
本文开发环境是winform。参考https://docs.devexpress.com/XtraReports...
8、报表打印格式设置
一般情况下，报表上报时，除了上报数据外，还需要提供纸质报表，因此，我们设计完报表格式后，还需要设计报表的打印格式。...
出库发货单报表打印方式
软件里出库发货打印，打印格式基本是固定的，没法动态调整。现在增加一种报表打印方式。报表模版调整比较复杂和麻烦，自...