9.报表转换模板

9.1.模板和占位符

用 callfunc 函数调用 105 功能号，是后端动态转换的主要手段，通常情况下，直接将内容转换到一个新的 html 文件即可，但在某些情况下，需要将报表按照模板转换，即将报表 html 中的各个段落安插到另一个文件中，为此，我们定义了 模板的规则，一个典型的模板文件内容如下：

    <html>
    <head><meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <style>
    <!--SUPCAN_REPORT_STYLE  prefix="dx"--></style>
    <script>
    <!--SUPCAN_REPORT_JS-->
    </script>
    </head>
    <body onresize="supcan_Resize()" onload="supcan_Resize()" leftmargin="0" topmargin="0">
    <!--SUPCAN_REPORT_dTitle id="dTitle"-->
    <!--SUPCAN_REPORT_dHeadLeft-->
    <!--SUPCAN_REPORT_dHead-->
    <!--SUPCAN_REPORT_dLeft-->
    <!--SUPCAN_REPORT_dMain-->
    </body>
    </html>

脚本中的注释内容 <!-- ... --> 就是模板规则的核心，这些注释符相当于就是 "占位符"，最终它们会被替换成真正的内容.

Callfunc 调用 105 功能号，可以用 "Template" 参数指定模板，请参考报表开发文档 “4.工具条功能号”.

占位符如 "<!--SUPCAN_REPORT_STYLE-->"，其中的“SUPCAN_REPORT_STYLE”是有固定含义的(注意: 大小写敏感)，目前我们一共定义了 11 种：
这些占位符，有些是必需的、有些是可选的。

序号 | 占位符 | 用途 | 是否必需
--- | --- | --- | ---
1 | <!--SUPCAN_REPORT_STYLE--> | 用于放置CSS样式，报表会动态生成大量样式类, 必须写在模版的<style> .. </style>中 | 是
2 | <!--SUPCAN_REPORT_dMain--> | 主数据区 | 是
3 | <!--SUPCAN_REPORT_dTitle--> | 顶部固定标题区, 用于实现报表的分层冻结显示 | 否
4 | <!--SUPCAN_REPORT_dHeadLeft--> | 左上角固定区, 同上 | 否
5 | <!--SUPCAN_REPORT_dHead--> | 上方固定区, 同上 | 否
6 | <!--SUPCAN_REPORT_dLeft--> | 左侧固定区, 同上 | 否
7 | <!--SUPCAN_REPORT_MAXHeight--> | 全部展现的总高度, 用于辅助 js 判断是否需要滚动条 | 否
8 | <!--SUPCAN_REPORT_MAXWidth--> | 全部展现的总宽度, 同上 | 否
9 | <!--SUPCAN_REPORT_JS--> | 自动生成的js片段和数据，必须出现在模版文件的<script> .. </script>中 | 是
10 | <!--SUPCAN_REPORT_BackImage--> | 自动生成背景图的html片段 | 否
11 | <!--SUPCAN_REPORT_UploadURL--> | 用于上报汇总模式，ajax传输数据的目的地 | 上报:是
12 | <!--SUPCAN_REPORT_WorkSheetName--> | 用于上报汇总模式，工作表名 | 否

这些占位符中，最重要的是 <!--SUPCAN_REPORT_dMain--> , 它就是主体数据区，以 <Table> 形式填入.
<!--SUPCAN_REPORT_STYLE-->决定了每个单元格的样式，比如左右对齐、表格线宽度等等, 为了让生成的样式的类名不和您的页面中其它样式类名冲突，您可以定义名为 "prefix" 的属性，表示动态类名的前缀，例如：

    <!--SUPCAN_REPORT_STYLE  prefix="dx"-->

该占位符最终可能会被替换成类似如下的串，类名是以"dx"开头的：

    .dx41 {
     border-left:0px;
     border-top:1px solid #CCCCCC;
     border-right:0px;
     border-bottom:0px;
     padding-left:1px;
    }
    .dx30 {
     border-left:0px;
     border-top:1px solid #FFFFFF;
     border-right:0px;
     border-bottom:0px;
    }
    .dx42 {
     border-left:0px;
     border-top:1px solid #C0C0C0;
     border-right:0px;
     border-bottom:0px;
     text-decoration:none;
    }
    ...