setHtml 支持哪些 HTML 样式

解答

setHtml 用于将 HTML 字符串写入文档，并解析为带格式的文档内容，支持通过 HTML 标签及 CSS 样式设置文字、段落、列表、表格、图片等内容格式。适用于文字文档。

根据内容要写到哪里，setHtml 在不同的对象上调用：

调用对象	内容写到哪里
Range（范围对象）	指定范围，如当前选区
Bookmark（书签对象）	书签区域，常用于模板填充
Cell（表格单元格对象）	某个表格单元格

调用示例

// 挂载文档，获取应用对象
const app = await ZOfficeSDK.mount(url, '#container');
const doc = app.ActiveDocument;

// 1. 替换当前选区内容
const range = await doc.getSelection();
await range.setHtml(htmlString);

// 2. 设置书签内容（常用于模板填充，item 参数为书签名称或序号，序号从 1 开始）
const bookmark = await doc.Bookmarks.item('contractNo');
await bookmark.setHtml(htmlString);

// 3. 设置表格单元格内容（序号从 1 开始）
const table = await doc.Tables.item(1);
const row = await table.Rows.item(1);
const cell = await row.Cells.item(1);
await cell.setHtml(htmlString);

提示：以上对象都有对应的 getHtml() 方法，可以把文档内容读出来变成 HTML 字符串，配合 setHtml 使用可以实现「读取 → 修改 → 写回」。

文字样式

功能	设置方式	示例
字号	font-size	<span style="font-size:14pt">文字</span>
加粗	font-weight 或 <b> / <strong>	<span style="font-weight:bold">文字</span>
斜体	font-style 或 <i> / <em>	<span style="font-style:italic">文字</span>
字体	font-family	<span style="font-family:宋体">文字</span>
文字颜色	color	<span style="color:#FF0000">文字</span>
文字背景色	background-color	<span style="background-color:#FFFF00">文字</span>
下划线	text-decoration: underline 或 <u>	<u>文字</u>
删除线	text-decoration: line-through 或 <s>	<s>文字</s>
上标	vertical-align: super 或 <sup>	<sup>2</sup>
下标	vertical-align: sub 或 <sub>	<sub>2</sub>
字符间距	letter-spacing（仅支持 pt 单位）	<span style="letter-spacing:2pt">文字</span>
字符缩放	font-width	<span style="font-width:150%">文字</span>
超链接	<a href="">	<a href="https://example.com">链接</a>
换行	<br>	第一行<br>第二行

段落样式

功能	设置方式	示例
左对齐	text-align:left	<p style="text-align:left">正文</p>
居中	text-align:center	<p style="text-align:center">正文</p>
右对齐	text-align:right	<p style="text-align:right">正文</p>
两端对齐	text-align:justify	<p style="text-align:justify">正文</p>
首行缩进	text-indent	<p style="text-indent:24pt">正文</p>
左缩进	margin-left	<p style="margin-left:24pt">正文</p>
右缩进	margin-right	<p style="margin-right:24pt">正文</p>
段前间距	margin-top	<p style="margin-top:6pt">正文</p>
段后间距	margin-bottom	<p style="margin-bottom:6pt">正文</p>
倍数行距	line-height	<p style="line-height:1.5">正文</p>（写 150% 等价于 1.5）
最小值行距	line-height	<p style="line-height:24pt">正文</p>（行高至少 24pt，内容超高时自动增大）
固定行距	line-height + line-height-rule	<p style="line-height:24pt; line-height-rule:exactly">正文</p>（行高固定为 24pt，不随内容变化）
标题	<h1> ~ <h6>	<h1>一级标题</h1>

段落标签上也可以直接设置文字样式：

<p style="
  font-size:14pt;
  font-family:宋体;
  color:#333333;
  text-align:justify;
  text-indent:28pt;
  line-height:1.5;
">
  正文内容
</p>

列表

无序列表

<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

支持设置项目符号样式：

<ul style="list-style-type:square">
  <li>第一项</li>
</ul>

支持：

• circle（空心圆 ○）
• square（方块 ■）

注意：disc 会按 circle 处理（渲染为空心圆 ○），无法得到实心圆 ●，因此不推荐使用。

有序列表

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

支持的编号类型：

• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha

指定起始编号：

<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>

支持通过嵌套列表设置多级编号：

<ol>
  <li>
    一级
    <ol>
      <li>二级</li>
    </ol>
  </li>
</ol>

表格

表格宽度

<table style="width:500px">

也支持百分比：

<table style="width:80%">

表格对齐

<table align="center">

支持：

• left
• center
• right

表格边框

<table style="border:1pt solid #000000">

也可以直接使用：

<table border="1">

单元格背景色

<td style="background-color:#FFFF00">
  内容
</td>

单元格边距

<td style="padding:5pt">
  内容
</td>

单元格边框

<td style="border:1pt solid #FF0000">
  内容
</td>

单元格垂直对齐

<td style="vertical-align:middle">
  内容
</td>

支持：

• top
• middle
• bottom

单元格宽度

<td style="width:100px">

合并列

<td colspan="2">
  合并两列
</td>

合并行

<td rowspan="2">
  合并两行
</td>

行高

<tr style="height:30pt">

图片

插入图片

<img
  src="data:image/png;base64,..."
  width="200"
  height="150"
/>

支持设置：

功能	设置方式
图片地址	src
图片宽度	width
图片高度	height

图片地址支持 Base64 数据和 http:// / https:// 网络地址，建议优先使用 Base64（不依赖网络加载）。

常用完整示例

以下示例覆盖了前文列出的全部样式，可直接传给 setHtml 查看效果：

<!-- 标题（h1 ~ h6 均支持） -->
<h1 style="text-align:center">合同标题</h1>
<h2>一、文字样式</h2>

<!-- 文字样式：加粗、斜体、字号、字体、颜色、背景色、下划线、删除线、上下标、字符间距、字符缩放、超链接、换行 -->
<p style="font-family:宋体; font-size:14pt; line-height:1.5">
  <span style="font-weight:bold">加粗</span>、
  <i>斜体</i>、
  <span style="font-size:18pt; font-family:黑体">黑体 18pt</span>、
  <span style="color:#FF0000">红色文字</span>、
  <span style="background-color:#FFFF00">黄色背景</span>、
  <u>下划线</u>、
  <s>删除线</s>、
  上标 x<sup>2</sup>、下标 H<sub>2</sub>O、
  <span style="letter-spacing:2pt">字符间距</span>、
  <span style="font-width:150%">字符缩放</span>、
  <a href="https://example.com">超链接</a>、
  换行前<br>换行后
</p>

<h2>二、段落样式</h2>

<!-- 段落对齐：left / center / right（justify 见下方缩进段落） -->
<p style="text-align:left">左对齐段落</p>
<p style="text-align:center">居中段落</p>
<p style="text-align:right">右对齐段落</p>

<!-- 首行缩进、左右缩进、段前 / 段后间距 -->
<p style="text-align:justify; text-indent:28pt; margin-left:24pt; margin-right:24pt; margin-top:6pt; margin-bottom:6pt">
  首行缩进 28pt、左右缩进 24pt、段前段后间距 6pt 的两端对齐段落。
</p>

<!-- 行距：倍数 / 最小值 / 固定值 -->
<p style="line-height:1.5">1.5 倍行距</p>
<p style="line-height:24pt">最小值 24pt 行距</p>
<p style="line-height:24pt; line-height-rule:exactly">固定 24pt 行距</p>

<h2>三、列表</h2>

<!-- 无序列表：circle / square -->
<ul style="list-style-type:circle">
  <li>空心圆项目一</li>
  <li>空心圆项目二</li>
</ul>
<ul style="list-style-type:square">
  <li>方块项目</li>
</ul>

<!-- 有序列表：编号类型、起始编号、嵌套 -->
<ol style="list-style-type:decimal" start="3">
  <li>十进制编号，起始编号 3</li>
  <li>
    嵌套二级列表
    <ol style="list-style-type:lower-roman">
      <li>小写罗马编号</li>
      <li>小写罗马编号</li>
    </ol>
  </li>
</ol>
<ol style="list-style-type:upper-roman">
  <li>大写罗马编号</li>
</ol>
<ol style="list-style-type:lower-alpha">
  <li>小写字母编号</li>
</ol>
<ol style="list-style-type:upper-alpha">
  <li>大写字母编号</li>
</ol>

<h2>四、表格</h2>

<!-- 表格：宽度、对齐、边框；行高；单元格：背景色、宽度、边距、边框、垂直对齐；colspan / rowspan -->
<table border="1" align="center" style="width:100%">
  <tr style="height:30pt">
    <td colspan="2" style="background-color:#D9D9D9; text-align:center">合同信息（跨两列，行高 30pt）</td>
  </tr>
  <tr>
    <td rowspan="2" style="width:120px; vertical-align:middle; padding:5pt">合同编号（跨两行，垂直居中）</td>
    <td>HT-2026-001</td>
  </tr>
  <tr>
    <td style="border:1pt solid #FF0000">HT-2026-002（红色单元格边框）</td>
  </tr>
</table>

注意事项

• 样式请直接写在元素的 style 属性里，例如：

  <span style="font-size:14pt;color:#FF0000">
    示例文字
  </span>

• 尺寸单位推荐使用 pt、px、em。

• 颜色支持 #FF0000、rgb(255, 0, 0)、red 三种写法，不支持 3 位缩写十六进制（如 #F00）和 hsl()。

相关文档

• Range API
• Bookmark API
• Cell API