# 创建 HTML 报表

HTML 报表可包含 HTML 和图像文件。它们作为 .zip 文件被传输至用户。

本教程展示如何：

* 创建 HTML
* 在 HTML 报表中嵌入图像
* 添加层级
* 以标签形式添加层级变量标签

所得报表对于三年的每一年都有相应的标题和图像。HTML 报表支持大多数 Qlik Sense 对象。请参阅： [使用 Qlik 对象](https://help.qlik.com/zh-CN/nprinting/February2025/Content/NPrinting/ReportsDevelopment/Qlik-objects-supported-NP.htm) （仅提供英文版本）



## 测试

您可使用我们的示例文件来创建自己的报表。要下载这些文件，请参阅：[示例文件](https://help.qlik.com/zh-CN/nprinting/February2025/Content/NPrinting/Examples/Examples.htm) （仅提供英文版本）。

## 新建 HTML 报表

进行以下操作：

1. 在 Qlik NPrinting 主菜单中选择报表，然后单击创建报表。

2. 为报表输入标题。

3. 在类型下拉列表中选择 HTML。

4. 从应用程序下拉列表选择应用程序。

5. 在可用选项中选择模板：

   * 空模板 - 使用空模板

   * 默认模板 - 使用默认模板（仅在报表设置中设置了默认模板时可用）。

     请参阅[以模板形式加载 Office、HTML 或 PixelPerfect 文件](https://help.qlik.com/zh-CN/nprinting/February2025/Content/NPrinting/ReportsDevelopment/Load-file-as-template.htm) （仅提供英文版本）

   * 自定义 - 选择要用作模板的文件。

6. 单击创建来创建报表。

### 选择连接和对象

进行以下操作：

1. 单击编辑模板打开模板编辑器。
2. 右键单击图像节点，然后选择添加对象。
3. 选您择要以图像形式添加的对象
4. 单击确定。
5. 拖放图像对象至 `<body>` 和 `</body>` 标签之间的行上。
6. 单击预览。
7. 单击报表，关闭它，然后根据需要再次编辑模板。
8. 单击保存并关闭以保存模板并关闭模板编辑器。

## 所得报表

```
 <html>
	<body Style="text-align: center;">
		<h3 Style="text-align: center; font: 21px verdana;">前 10 个国家/地区 		</h3> 			  <img src="%%CH320%%" alt="CH320"> 		<h3 Style="text-align: center; font: 21px verdana;">前 10 个产品 		</h3> 			<img src="%%CH184%%" alt="CH184"> 	</body>
</html>			
```

## 打开选择层级窗口

您可生成具有在每年循环通过的级别的 HTML 报表。

进行以下操作：

1. 右键单击层级节点，然后选择添加层级。

2. 在层级列表中选择Year。

3. 单击确定。

4. 展开层级节点。

5. 将 Year\_Level 节点符记拖放至 `<body>` 和 `</body>` 标签之间的行。

   根据需要添加行。

   结果是在行之间得到三个新行：`%%Year_Level%%`、`%%/Year_Level%%` 和空白行。

6. 在您要纳入层级循环的元素前面布置 `%%Year_Level%%` 行，并在您要纳入层级循环的元素后面布置 `%%Year_Level%%` 行。

7. 展开 `Year_Level` ji节点。

8. 将 Year 节点符记拖放至 `%%Year_Level%%` 和 `%%Year_Level%%` 行之间的行。

9. 添加内联样式元素。请参见下面的代码示例。

## 所得报表

例如以下 HTML 代码用于创建相应的 HTML 报表。报表将具有三个有标题的部分，每年一个。

```
<html>
	<body Style="text-align: center;">%%Year_Level%%  		<h2 Style="font: 24px verdana;font-weight: bold;">%%Year%% </h2>
			<h3 Style="text-align: center; font: 21px verdana;">前 10 个国家/地区</h3> 			<img src="%%CH320%%" alt="CH320"> 			<h3 Style="text-align: center; font: 21px verdana;">前 10 个产品</h3> <img src="%%CH184%%" alt="CH184">  %%/Year_Level%%  	</body>
</html>
```

### 相关流程

* [HTML 报表](https://help.qlik.com/zh-CN/nprinting/February2025/Content/NPrinting/HTMLReports/IntroHTML.htm)

## 了解详情

* [HTML 报表](https://help.qlik.com/zh-CN/nprinting/February2025/Content/NPrinting/HTMLReports/IntroHTML.htm)