“从 HTML 生成”功能需要一个 HTML 模板和用于填充该模板的结构化数据（JSON 数据），以生成标准的 HTML 代码。然后，通过“从 HTML 生成”功能的相应界面，您可以将该标准 HTML 代码转换为 PDF 文档。下面是使用ComPDF 生成SDK的生成PDF文件的步骤
构建 HTML 模板
模板是一个 HTML 文件，还需要一个与之匹配的 JSON 数据文件。JSON 数据文件为标准 JSON 文件。HTML 模板文件需要与 JSON 数据结合使用，才能生成标准的 HTML 代码。该 HTML 生成过程支持变量、if 语句、for 循环、算术运算和常用函数。
HTML模板示例：
<!doctype html>
<html>
<body style="margin: 0; padding: 0;">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin: 0 auto">
<tr>
<td style="padding-top: 40px;">
<img
src="{% if compdfkit %}images/logo.png{% else if compdfkit2 %}images/logo2.png{% else %}images/logo3.png{% endif %}"
alt="PDF Technologies"
width="203"
height="50">
</td>
<td style="padding-top: 40px; text-align: right;">
<img src="images/invoice.png" alt="invoice" width="132">
<td style="border: 1px solid #8A8EA8; padding: 2px 10px;">{{billNo}}</td>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<!-- {% set totalprice = 0 %} -->
<!-- {% for item in items %} -->
<tr style="height:64px;color:#333;">
<td style="width:70px;height:70px;border-bottom: 2px solid #F3F3F3; padding-left: 10px; text-align: left;">
{{ item.index }}
</td>
<td style="width: 160px;border-bottom: 2px solid #F3F3F3; font-size: 13px; line-height: 15px; color: #121E3F;text-align:left;">
<div>
<p style="font-size: 13px; line-height: 15px; font-weight: bold; color: #121E3F; margin: 0;">
{{ item.product }}
</p>
<p style="font-size: 11px; line-height: 12px; padding-top: 4px; color: #5F6881; margin: 0;">
{{ item.startDateAndEndDate }}
</p>
</div>
</td>
<td style="width: 130px;border-bottom: 2px solid #F3F3F3; font-size: 13px; line-height: 15px; color: #121E3F;text-align:left;">
{{ item.paymentCycle }}
</td>
<td style="width: 100px;border-bottom: 2px solid #F3F3F3; font-size: 13px; line-height: 15px; color: #121E3F;text-align:left;">
{{ item.gearLevel }}
</td>
<td style="width: 100px;text-align:left;border-bottom: 2px solid #F3F3F3; font-size: 13px; line-height: 15px; color: #121E3F;">
$ {{ item.price }}
</td>
</tr>
<!-- {% set totalprice = totalprice + item.price %} -->
<!-- {% endfor %} -->
<tr>
<td style="width:70px;"></td>
<td style="width:160px;"></td>
<td colspan="2" style="width: 100px; text-align:right; font-weight: bold; font-size: 16px; line-height: 18px; color: #121E3F; padding-right: 72px;">Total:</td>
<td style="width: 100px; text-align:left; font-weight: bold; font-size: 16px; line-height: 18px; color: #121E3F;">$ {{round(totalprice * (1 + tax * 0.01), 2)}}</td>
</tr>
</table>
</body>
</html>
准备 JSON 数据
准备标准格式的 JSON 数据，以便与 HTML 模板合并，并将数据填充到模板中以生成标准 HTML。JSON 数据示例：
{
"address": "456 Oak Avenue",
"billNo": "2345678901",
"company": "TechCorp Ltd.",
"country": "Canada",
"email": "alice.smith@techcorp.com",
"firstName": "Alice",
"gearLevel": "Pro",
"compdfkit": false,
"compdfkit2": true,
"invoiceDate": "2025-01-15",
"lastName": "Smith",
"paymentCycle": "Yearly",
"price": "1200",
"province": "Ontario",
"startDateAndEndDate": "2025-01-15 to 2025-02-15",
"tax": 8,
"zip": "K1A 0A6",
"items": [
{
"index": 1,
"product": "ComPDFKit Pro",
"startDateAndEndDate": "2025-01-15 to 2025-02-15",
"paymentCycle": "Yearly",
"gearLevel": "Pro",
"price": 800
},
{
"index": 2,
"product": "ComPDFKit API",
"startDateAndEndDate": "2025-01-15 to 2025-02-15",
"paymentCycle": "Monthly",
"gearLevel": "Basic",
"price": 400
}
]
}
填写模板以生成 PDF 文件
将 JSON 文件与 HTML 模板合并后转换为 PDF：
//HTML template file path
String templatePath = "/template_1.html";
//json file path
String jsonPath = "/data1.json";
//Output HTML path
String outHtmlPath = "/outHtml.html";
//Output PDF path
String outPdfPath = "/outPdf.pdf";
//Combine the JSON file with the HTML template to generate HTML content
CHtmlConverter.CErrorCode id = CHtmlConverter.HtmlRenderTemplate(templatePath, jsonPath, outHtmlPath);
//Convert HTML to PDF
id = CHtmlConverter.ConvertToPdf(outHtmlPath, outPdfPath);
复制
