应用 HTML 格式
当您在 HTML 模板编辑器中创建模板时,您可应用 CSS 内联样式元素。
测试
您可使用我们的示例文件创建自己的应用程序。要下载这些文件,请参阅:示例文件 (仅提供英文版本)。
允许对整个图表应用 CSS 内联样式
在您以表格形式添加对象之后:
进行以下操作:
- 如果显示有属性,请跳至步骤 3,否则右键单击表格节点。
- 选择属性。
- 取消选中Keep Source Formats复选框。
这将使表格所有列中所有单元的内容从 QlikView 导出,不采用格式化。将会应用您在 HTML 模板中设置的 CSS 内联样式元素。在选中或不选中Keep Source Formats的情况下比较输出。
允许对特定列应用 CSS 内联样式元素
确保 QlikView 中您的表格对象为垂直表。QlikView 数据透视表必须转换为垂直表后方可选择它们以纳入 Qlik NPrinting 表格节点下方,否则您将无法访问各个字段/列。 如果您希望对大多数列保留源格式,可让Keep Source Formats复选框为整个表格选中,并执行以下操作:
- 展开表格节点。
- 单击您要应用 CSS 内联样式元素的列。
- 取消选中Keep Source Formats复选框。
-
如果选择了 HTML Encode复选框,可解释为 HTML 标签元素的任何非字母数字符号(例如 < 和 />)将转换为 HTML 实体。
如果清除了 HTML Encode复选框,任何可解释为 HTML 标签元素的非字母数字符号将通过 Qlik NPrinting HTML 模板编辑器中使用的底层 HTML 代码呈现。
这将导致表格所选列中的所有单元的内容不采用格式化而从 QlikView 导出,但是它们将应用任何您已经在 HTML 模板中应用的 CSS 内联样式元素。您可根据需要对任意数目的单独列执行该操作。
向列应用格式
进行以下操作:
- 在 HTML Report (Sales) 中,选择总利润。
- 在Format字段中输入 $#.##,00。
构建您的表格
进行以下操作:
-
用一行数据单元构建 HTML 表格。源代码应当类似以下形式:
<table> <tr> <td></td> <td></td> <td></td> </tr> </table>
-
在表格数据单元标签之间拖动表格列节点图标。
在列选择期间,您可通过按住 Ctrl 或 Shift 来选择多个值,然后将它们拖放至模板。这样将创建标签并将它们插入水平连续单元。
已经为总利润列清除了复选框 Keep Source Formats。
- 在第一行上面插入另一行。
- 在新行中插入表格标题单元。
- 输入所需标题。
- 重新打开您添加至模板的每个列的属性对话框窗口,一次打开一个。
-
在Show Header行的Value列中单击。此单元的值将为显示。
- 单击出现的下拉菜单按钮,然后选择隐藏。
这是为两列清除了Keep Source Formats复选框的原表格,并添加了标题行,为每列隐藏了原表格标题。
应用内联样式元素
在该情况下,示例输出较简单,但是可让您大概了解输出内容。
下面是完整代码:
<html>
<body>
<table cellspacing=0 style="border-collapse:collapse;">
<tr style="width:0*; font-family:Verdana; font-size:small; font-variant:small-caps;">
<th style="border:grey dashed 1px;"> 产品名称 </th>
<th style="border:grey dashed 1px;"> 销售额总计 </th>
<th style="border:grey dashed 1px;"> Gross Profit </th>
<th style="border:grey dashed 1px;"> GP% </th>
<th style="border:grey dashed 1px;"> Quantity </th>
</tr>
<tr>
<td style="width:0*; font-family:Verdana; font-size:small; font-weight:bold; font-variant:small-caps;"> %%ProductName%% </td>
<td> %%Total Sales%% </td>
<td> %%Gross Profit%% </td>
<td> %%GP%_1%% </td>
<td style="width:0*; color:red; font-family:Georgia; font-size-adjust:0.40; background-color:Yellow; border:green solid 2px; text-align:right;"> %%Quantity_1%% </td>
</tr>
</table>
</body>
</html>