Previous topicNext topic
WebBuilderX > 开发在线统计页面 > HTML报表打印 >
报表模板

由于这里需要打印的是报表，而这个报表数据又来自于表格，因而在模板中需要用到HTML中与table相关的标签。关于这些标签的常规使用说明，请参考“行数据打印”。

现以之前生成的表格数据为例，简单编写了一个HTML模板，其预览效果如下图：

报表模板代码写入以下文本框：

以下为该模板代码的实现过程：

<h3 style="text-align:center">数据统计报表</h3>

这里给标签加上了style样式属性，让标题居中。

  • 确定表格外观。这是报表模板的表体部分，外边框比较粗，内部的单元格边框比较细，所以就要给table标签加上相应的样式：

<table border="3" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:auto">
    </table>

这里的border属性值为3，表示比较粗的外边框，数字越大就越粗；cellpadding为5，表示单元格内部的文字和边框之间的距离；cellspacing表示不同单元格之间的距离。另外加了2个样式：border-collapse的属性值为collapse，表示相邻两个单元格的边框重叠；margin属性值为auto，表示让表格水平居中。

  • 设计表头。在table标签写好之后，接着就要在这个标签里添加数据行。由之前生成的表格可知，表头有2行，所以这里要加2个tr标签：

<tr align="center">
        <td rowspan="2">产品</td>
        <td colspan="2">数量</td>
        <td colspan="2">金额</td>
    </tr>
    <tr align="center">
        <td>值</td>
        <td>占比</td>
        <td>值</td>
        <td>占比</td>
    </tr>

这里的tr表示行，td表示单元格。其中，第1行的“产品”需要向下合并1行，所以加上了rowspan属性，属性值为2；“数量”和“金额”需要向右合并1列，所以都加上了colspan属性，属性值为2。第2行没有需要合并的单元格，所以都正常写。

这里的2行表头，都加上了内容居中的align属性。

  • 设计表体。这里是整个模板的重点，编写规则请参考“列模板”。不同的是，这里的“d.”表示的是表格里的多行数据：

{{# d.forEach(function(item,index){ }}
       <tr align="right">
          <td align="left">{{ item.产品 }}</td>
          <td>{{ item.数量 }}</td>
          <td>{{ Number(item.数量占比*100).toFixed(2) + '%' }}</td>
          <td>{{ Number(item.金额).toFixed(2) }}</td>
          <td>{{ Number(item.金额占比*100).toFixed(2) + '%'}}</td>
       </tr>
    {{# }) }}

由于这里的d代表的是表格多行数据，因而它属于数组类型，可以使用forEach方法对多行数据进行遍历。每遍历到一行数据，这里就增加一个tr行。

遍历的时候，通过item参数得到当前数据行。由于行数据都是对象，所以又可以通过“.列名”的形式得到该行中每一列的值，并将它们分别放到td单元格中。

在这里，tr行设置了align属性为right，也就是该行全部数据都靠右对齐，而“产品”是不需要靠右的，所以单独给它加上了值为left的align属性。

<colgroup>
      <col width="120" style="background: silver">
      <col width="80">
      <col width="80">
      <col width="80">
      <col width="80">
   </colgroup>

在这个colgroup中，第1列宽度120，且背景色为银色；其余各列都是80。

以下是本示例的完整模板代码：

<h3 style="text-align:center">数据统计报表</h3>
   <table border="3" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:auto">
      <tr align="center">
         <td rowspan="2">产品</td>
         <td colspan="2">数量</td>
         <td colspan="2">金额</td>
      </tr>
      <tr align="center">
         <td>值</td>
         <td>占比</td>
         <td>值</td>
         <td>占比</td>
      </tr>
      {{# d.forEach(function(item,index){ }}
       <tr align="right">
          <td align="left">{{ item.产品 }}</td>
          <td>{{ item.数量 }}</td>
          <td>{{ Number(item.数量占比*100).toFixed(2) + '%' }}</td>
          <td>{{ Number(item.金额).toFixed(2) }}</td>
          <td>{{ Number(item.金额占比*100).toFixed(2) + '%'}}</td>
       </tr>
      {{# }) }}
      <colgroup>
         <col width="120" style="background: silver">
         <col width="80">
         <col width="80">
         <col width="80">
         <col width="80">
      </colgroup>
   </table>