插入 HTML - 丰富的内容指南
PDF4me的文档生成引擎支持直接 HTML 在 Word 模板中插入，使您能够添加格式丰富的文本、复杂的文本样式和结构化内容。 HTML 动态更新内容。当数据源包含预格式化内容时，此功能尤其有用。 HTML 内容。
HTML 插入语法
插入 HTML 使用以下内容 -html 切换到您的合并字段：
<<[token] -html>>这 -html switch 语句指示模板引擎将字段值解析为 HTML 并以适当的格式将其渲染到生成的文档中。
基本的 HTML 插入
简易格式文本
数据来源：
{
"apicalls": "<b>PDF4me's API Calls or Automation calls</b> is the fuel for creating robust and powerful workflows to automate your document jobs. It lets you smoothly access various document generation and management features provided by PDF4me."
}
模板语法：
<<[apicalls] -html>>生成的输出： 文本将显示为“PDF4me的 API “呼叫或自动化呼叫” 大胆的然后是其余文本，格式正常。
支持 HTML 元素
PDF4me的 HTML 渲染支持通用 HTML 格式化标签：
文本格式标签
粗体字：
<b>Bold text</b>
<strong>Strong text</strong>
斜体字：
<i>Italic text</i>
<em>Emphasized text</em>
强调：
<u>Underlined text</u>
删除线：
<s>Strikethrough text</s>
<del>Deleted text</del>
结构元素
段落：
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
换行符：
Line one<br>Line two<br>Line three
标题：
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
列表
无序列表：
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
有序列表：
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
文本样式
字体颜色：
<span style="color: red;">Red text</span>
<span style="color: #0000FF;">Blue text</span>
字体大小：
<span style="font-size: 14pt;">Larger text</span>
<span style="font-size: 10pt;">Smaller text</span>
字体系列：
<span style="font-family: Arial;">Arial text</span>
<span style="font-family: 'Times New Roman';">Times text</span>
实际案例
示例 1：格式化的产品描述
数据：
{
"productDescription": "<h2>Premium Laptop Pro</h2><p><b>Features:</b></p><ul><li>Intel Core i9 Processor</li><li>32GB RAM</li><li>1TB SSD Storage</li><li>15.6\" 4K Display</li></ul><p><i>Perfect for professionals and power users.</i></p>"
}
模板：
Product Details:
<<[productDescription] -html>>
示例 2：条款和条件
数据：
{
"terms": "<h3>Terms and Conditions</h3><ol><li><b>Payment:</b> Payment due within 30 days of invoice date.</li><li><b>Warranty:</b> Limited 1-year warranty on all products.</li><li><b>Returns:</b> Returns accepted within <u>14 days</u> of purchase.</li></ol><p><i>For complete terms, visit our website.</i></p>"
}
模板：
<<[terms] -html>>
示例 3：格式化公告
数据：
{
"announcement": "<div style='text-align: center;'><h1 style='color: #0066CC;'>Important Notice</h1><p><b>System Maintenance Scheduled</b></p><p>Our systems will undergo maintenance on <u>January 15, 2024</u> from <b>2:00 AM to 6:00 AM EST</b>.</p><p><i>We apologize for any inconvenience.</i></p></div>"
}
模板：
<<[announcement] -html>>
合并 HTML 使用模板逻辑
整合 HTML 使用 foreach 循环和条件语句进行插入。
HTML 列表中的内容
模板：
<<foreach [section in sections]>>
<<[section.htmlContent] -html>>
<</foreach>>
数据：
{
"sections": [
{
"htmlContent": "<h3>Section 1</h3><p>Content with <b>bold</b> and <i>italic</i> text.</p>"
},
{
"htmlContent": "<h3>Section 2</h3><ul><li>Point A</li><li>Point B</li></ul>"
}
]
}
条件 HTML 展示
模板：
<<if [hasWarning]>>
<<[warningHtml] -html>>
<</if>>
<<[mainContent] -html>>
数据：
{
"hasWarning": true,
"warningHtml": "<div style='background-color: #FFF3CD; padding: 10px; border: 1px solid #FFC107;'><b>⚠ Warning:</b> Please review all terms carefully before proceeding.</div>",
"mainContent": "<p>Your contract details are listed below...</p>"
}
HTML 表格
插入完整 HTML 用于复杂数据呈现的表格结构。
例子： HTML 桌子
数据：
{
"salesTable": "<table border='1' cellpadding='5' cellspacing='0'><tr><th>Product</th><th>Units Sold</th><th>Revenue</th></tr><tr><td>Product A</td><td>150</td><td>$15,000</td></tr><tr><td>Product B</td><td>230</td><td>$23,000</td></tr><tr><td><b>Total</b></td><td><b>380</b></td><td><b>$38,000</b></td></tr></table>"
}
模板：
Sales Summary:
<<[salesTable] -html>>
混合内容文件
将标准合并字段与 HTML 用于灵活生成文档的内容。
示例：混合格式报表
模板：
Report Title: <<[reportTitle]:caps>>
Generated: <<[generatedDate]:"MMMM dd, yyyy">>
Executive Summary:
<<[executiveSummary] -html>>
Details:
<<foreach [item in items]>>
• <<[item.name]>> - <<[item.status]>>
<</foreach>>
Conclusion:
<<[conclusion] -html>>
HTML 格式最佳实践
HTML 内容指南
- 有效的 HTML - 使用格式良好、有效的字符串 HTML 标记
- 内联样式 - 优先选择内联 CSS 样式表取代外部样式表
- 简单结构 - 保持 HTML 结构相对简单
- 测试渲染 测试差异 HTML 渲染输出文档
- 逃脱特殊角色 - 正确转义引号和特殊字符 HTML
穿搭建议
- 基本格式 坚持基本原则 HTML 格式化标签
- 避免复杂 CSS - 复杂的 CSS 可能无法按预期渲染
- 字体兼容性 使用广泛可用的字体系列
- 颜色代码 - 为保持一致性，请使用十六进制颜色代码（#RRGGBB）。
- 尺寸单位 - 字体大小请使用 pt（磅）作为单位。
安全考量
接受时 HTML 来自外部来源：
- 对输入进行消毒 - 清除潜在的恶意行为 HTML
- 验证结构 - 核实 HTML 结构良好
- 限制标签 - 考虑限制允许的 HTML 标签
- 转义用户输入 - 正确转义用户生成的内容
- 测试输出 - 检查生成的文档是否存在意外内容
HTML 与模板格式对比
何时使用 HTML 插入
使用 HTML 什么时候：
- 内容来自 WYSIWYG 编辑
- 需要复杂的格式。
- 内容包括表格、列表和混合格式。
- 保留来自外部来源的富文本
在以下情况下使用模板格式：
- 简单的文本格式就足够了。
- 处理结构化数据
- 对输出格式的最大控制
- 表现至关重要
局限性和注意事项
渲染限制
- CSS 支持 - 有限的 CSS 支持；内联样式效果最佳
- 复杂的布局 非常复杂 HTML 可能无法完美渲染
- JavaScript - JavaScript 在 HTML 未执行
- 外部资源 - 外部的 CSS图片可能无法加载
- 浏览器特定功能 - 先进的 HTML5 某些功能可能不受支持。
表现
- 处理时间 - HTML 解析会增加处理开销。
- 大量内容 - 非常大 HTML 字符串可能会影响性能
- 多个实例 - 许多 HTML 插入可能减缓生成
完整示例：新闻稿模板
模板：
<<[companyName]:upper>> Newsletter - <<[issueDate]:"MMMM yyyy">>
<<[headerHtml] -html>>
Articles:
<<foreach [article in articles]>>
<<[article.contentHtml] -html>>
---
<</foreach>>
<<[footerHtml] -html>>
数据：
{
"companyName": "Tech Innovations Inc.",
"issueDate": "2024/01/01",
"headerHtml": "<div style='background-color: #4A90E2; color: white; padding: 20px; text-align: center;'><h1>Monthly Tech Update</h1><p>Your source for the latest technology news</p></div>",
"articles": [
{
"contentHtml": "<h3>New Product Launch</h3><p>We're excited to announce our <b>latest innovation</b> in cloud computing. <a href='https://example.com/product'>Learn more</a></p>"
},
{
"contentHtml": "<h3>Industry Insights</h3><p>Recent studies show that <i>automation</i> is transforming the workplace. Here's what you need to know:</p><ul><li>Increased efficiency</li><li>Cost savings</li><li>Better accuracy</li></ul>"
}
],
"footerHtml": "<p style='font-size: 10pt; color: #666;'><i>© 2024 Tech Innovations Inc. All rights reserved.</i></p>"
}
：：：提示 HTML 测试
始终进行测试 HTML 插入示例数据以验证渲染是否符合预期。不同的文档格式（Word、 PDF) 可能渲染 HTML 略有不同。
:::
：：：警告 HTML 复杂性
保持 HTML 内容应尽量简单，以获得最佳效果。非常复杂 HTML 具有先进结构的 CSS 可能无法在所有输出格式中完美呈现。
:::