使用AI Agent自动化生成订单/发票/合同:从自然语言到PDF的一站式方案

生成订单、发票、合同这些商务文档,过去要么手动排版耗时费力,要么写代码调 API 有技术门槛。现在有了 AI Agent + ComPDF Generation API 的组合,你只需要用自然语言说清楚需求,AI Agent 会自动创建 HTML 模板和 JSON 数据文件,你可以在 ComPDF 在线 Demo 页面预览和验证生成效果,甚至可以一键生成一个调用 ComPDF Generation API 的可视化程序。全程零代码,注册 ComPDF Cloud 即可获得每月 200+ 次的免费处理额度。

整体流程概览:从自然语言到 PDF 文件

整个工作流只需四个步骤:

  • Step 1 → 告诉 AI Agent 你的文档需求,它自动生成 HTML 模板和 JSON 数据
  • Step 2 → 在 ComPDF 在线 Demo 中验证生成效果,不满意可让 AI 直接修改
  • Step 3 → 让 AI Agent (每个AI Agent都可以,本次示例使用的是OpenCode)为你生成一个调用 API 的可视化程序
  • Step 4 → 注册 ComPDF Cloud 获取 API Key,免费每月 200+ 次额度

下面我们以外贸购物场景为例,一步步带你走完整个流程。

Step 1:用自然语言让 AI Agent 生成模板和示例数据

向 AI Agent 发送需求指令

打开任意 AI Agent(如 OpenCode、Claude、ChatGPT 、Copilot等),发送以下指令:

我是一家外贸公司,需要生成一份英文购物订单的 HTML 模板和 JSON 数据。模板需包含公司 LOGO 位置、客户信息、商品列表(名称、单价、数量、小计)、运费、税费、总计金额;JSON 数据请模拟一笔真实的外贸订单。

AI Agent 会立即返回两个文件:order_template.htmlorder_data.json。这两份文件都可以直接打开并查看是否符合您的业务需求,并让AI做相应的修改,比如在页面右上角插入自己公司的logo等。

AI Agent 返回的订单模板

以下是 AI Agent 生成的 HTML 模板核心代码:

<!DOCTYPE html>                                                                                                                                                                              |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <html>                                                                                                                                                                                       |
| <head>                                                                                                                                                                                       |
| <meta charset="utf-8">                                                                                                                                                                       |
| <style>                                                                                                                                                                                      |
| @page { size: A4; margin: 20mm 15mm; }                                                                                                                                                       |
| * { margin: 0; padding: 0; box-sizing: border-box; }                                                                                                                                         |
| body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #1a202c; font-size: 13px; line-height: 1.5; }                                                                                |
| .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; border-bottom: 3px solid #1a365d; padding-bottom: 20px; }                             |
| .logo { width: 120px; height: 60px; background: #1a365d; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; border-radius: 4px; } |
| .doc-title { text-align: right; }                                                                                                                                                            |
| .doc-title h1 { font-size: 26px; color: #1a365d; letter-spacing: 2px; }                                                                                                                      |
| .doc-title p { color: #718096; font-size: 12px; }                                                                                                                                            |
| .info-grid { display: flex; justify-content: space-between; margin-bottom: 25px; }                                                                                                           |
| .info-box { width: 48%; }                                                                                                                                                                    |
| .info-box h3 { font-size: 11px; color: #1a365d; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; }                 |
| .info-box p { font-size: 12px; color: #4a5568; margin: 2px 0; }                                                                                                                              |
| table { width: 100%; border-collapse: collapse; margin: 20px 0; }                                                                                                                            |
| th { background: #1a365d; color: #fff; padding: 10px 8px; font-size: 12px; text-align: left; letter-spacing: 0.5px; }                                                                        |
| td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; font-size: 12px; }                                                                                                                  |
| td.num { text-align: right; }                                                                                                                                                                |
| .totals { width: 320px; margin-left: auto; margin-top: 10px; }                                                                                                                               |
| .totals table { margin: 0; }                                                                                                                                                                 |
| .totals td { padding: 6px 10px; border: none; font-size: 12px; }                                                                                                                             |
| .totals .label { font-weight: bold; color: #4a5568; }                                                                                                                                        |
| .totals .value { text-align: right; }                                                                                                                                                        |
| .totals .grand-total td { font-size: 16px; font-weight: bold; color: #1a365d; border-top: 2px solid #1a365d; padding-top: 8px; }                                                             |
| .footer { margin-top: 40px; padding-top: 15px; border-top: 1px solid #e2e8f0; font-size: 11px; color: #a0aec0; text-align: center; }                                                         |
| </style>                                                                                                                                                                                     |
| </head>                                                                                                                                                                                      |
| <body>                                                                                                                                                                                       |
| <div class="header">                                                                                                                                                                         |
| <div class="logo">ABC TRADING</div>                                                                                                                                                          |
| <div class="doc-title">                                                                                                                                                                      |
| <h1>PURCHASE ORDER</h1>                                                                                                                                                                      |
| <p>Order No: {{order_number}} | Date: {{order_date}}</p>                                                                                                                                    |
| </div>                                                                                                                                                                                       |
| </div>                                                                                                                                                                                       |
|                                                                                                                                                                                              |
| <div class="info-grid">                                                                                                                                                                      |
| <div class="info-box">                                                                                                                                                                       |
| <h3>Seller</h3>                                                                                                                                                                              |
| <p><strong>{{seller.name}}</strong></p>                                                                                                                                                      |
| <p>{{seller.address}}</p>                                                                                                                                                                    |
| <p>{{seller.city}}, {{seller.country}}</p>                                                                                                                                                   |
| <p>Tel: {{seller.phone}} | Email: {{seller.email}}</p>                                                                                                                                      |
| </div>                                                                                                                                                                                       |
| <div class="info-box">                                                                                                                                                                       |
| <h3>Ship To</h3>                                                                                                                                                                             |
| <p><strong>{{buyer.name}}</strong></p>                                                                                                                                                       |
| <p>{{buyer.address}}</p>                                                                                                                                                                     |
| <p>{{buyer.city}}, {{buyer.country}}</p>                                                                                                                                                     |
| <p>Tel: {{buyer.phone}}</p>                                                                                                                                                                  |
| </div>                                                                                                                                                                                       |
| </div>                                                                                                                                                                                       |
|                                                                                                                                                                                              |
| <table>                                                                                                                                                                                      |
| <tr>                                                                                                                                                                                         |
| <th style="width:40px">#</th>                                                                                                                                                                |
| <th>Item Description</th>                                                                                                                                                                    |
| <th style="width:60px">Qty</th>                                                                                                                                                              |
| <th style="width:50px">Unit</th>                                                                                                                                                             |
| <th style="width:90px" class="num">Unit Price (USD)</th>                                                                                                                                     |
| <th style="width:100px" class="num">Total (USD)</th>                                                                                                                                         |
| </tr>                                                                                                                                                                                        |
| {{#each items}}                                                                                                                                                                              |
| <tr>                                                                                                                                                                                         |
| <td>{{inc @index}}</td>                                                                                                                                                                      |
| <td><strong>{{name}}</strong><br><span style="color:#718096;font-size:11px">{{sku}}</span></td>                                                                                              |
| <td>{{qty}}</td>                                                                                                                                                                             |
| <td>{{unit}}</td>                                                                                                                                                                            |
| <td class="num">{{format_price unit_price}}</td>                                                                                                                                             |
| <td class="num"><strong>{{format_price total}}</strong></td>                                                                                                                                 |
| </tr>                                                                                                                                                                                        |
| {{/each}}                                                                                                                                                                                    |
| </table>                                                                                                                                                                                     |
|                                                                                                                                                                                              |
| <div class="totals">                                                                                                                                                                         |
| <table>                                                                                                                                                                                      |
| <tr><td class="label">Subtotal</td><td class="value">${{format_price subtotal}}</td></tr>                                                                                                    |
| <tr><td class="label">Shipping ({{shipping.method}})</td><td class="value">${{format_price shipping.cost}}</td></tr>                                                                         |
| <tr><td class="label">Insurance</td><td class="value">${{format_price insurance}}</td></tr>                                                                                                  |
| <tr class="grand-total"><td>TOTAL AMOUNT</td><td class="value">${{format_price grand_total}}</td></tr>                                                                                       |
| </table>                                                                                                                                                                                     |
| </div>                                                                                                                                                                                       |
|                                                                                                                                                                                              |
| <p style="margin-top:15px;font-size:11px;color:#718096;">                                                                                                                                    |
| <strong>Terms:</strong> {{payment_terms}}<br>                                                                                                                                                |
| <strong>Delivery:</strong> {{delivery_date}} via {{shipping.method}}<br>                                                                                                                     |
| <strong>Incoterms:</strong> {{incoterms}}                                                                                                                                                    |
| </p>                                                                                                                                                                                         |
|                                                                                                                                                                                              |
| <div class="footer">                                                                                                                                                                         |
| ABC Trading Co., Ltd. | 123 Trade Street, Los Angeles, CA 90001, USA | www.abctrading.com                                                                                                  |
| </div>                                                                                                                                                                                       |
| </body>                                                                                                                                                                                      |
| </html>

模板特点:

  • 使用 Mustache 风格的变量占位符({{order_number}}{{seller.name}} 等)
  • 支持 {{#each items}} 循环渲染商品列表
  • CSS 样式完整覆盖了打印布局(@page size: A4
  • 包含公司品牌色(深蓝 #1a365d)和商用字体

对应的 JSON 数据示例

模拟了一笔真实的电子元器件外贸订单,包含 4 种商品,总金额 $113,590.00。

{
  "order_number": "PO-2026-0589",
  "order_date": "May 25, 2026",
  "seller": {
    "name": "ABC Trading Co., Ltd.",
    "address": "123 Trade Street, Suite 400",
    "city": "Los Angeles",
    "country": "United States",
    "phone": "+1 (213) 555-0198",
    "email": "orders@abctrading.com"
  },
  "buyer": {
    "name": "Shenzhen ElecTech Co., Ltd.",
    "address": "No. 88 Tech Road, Nanshan District",
    "city": "Shenzhen",
    "country": "China",
    "phone": "+86 755 8888 6666"
  },
  "items": [
    { "name": "Industrial Touch Screen Display 10.1\"", "sku": "TSD-101-IPS", "qty": 500, "unit": "pcs", "unit_price": 85.50, "total": 42750.00 },
    { "name": "Raspberry Pi Compute Module 4 (8GB)", "sku": "RPI-CM4-8G", "qty": 1000, "unit": "pcs", "unit_price": 45.00, "total": 45000.00 },
    { "name": "USB-C Power Supply 65W", "sku": "PS-65W-USBC", "qty": 800, "unit": "pcs", "unit_price": 12.80, "total": 10240.00 },
    { "name": "Industrial Enclosure IP65", "sku": "ENC-IP65-304", "qty": 300, "unit": "pcs", "unit_price": 38.20, "total": 11460.00 }
  ],
  "subtotal": 109450.00,
  "shipping": { "method": "Sea Freight (FOB Los Angeles)", "cost": 3250.00 },
  "insurance": 890.00,
  "grand_total": 113590.00,
  "payment_terms": "T/T 30% deposit, 70% against copy of B/L",
  "delivery_date": "July 15, 2026",
  "incoterms": "FOB Los Angeles"
}

继续生成发票模板和合同模板

保持同一对话,继续发送指令:

基于同样的外贸场景,帮我生成一份形式发票(Proforma Invoice)的 HTML 模板和 JSON 数据,包含发票号、开票日期、付款条款、银行信息。

AI Agent 会生成发票模板:

<!DOCTYPE html>                                                                                                                                                                                                                   |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <html>                                                                                                                                                                                                                            |
| <head>                                                                                                                                                                                                                            |
| <meta charset="utf-8">                                                                                                                                                                                                            |
| <style>                                                                                                                                                                                                                           |
| @page { size: A4; margin: 18mm 15mm; }                                                                                                                                                                                            |
| * { margin: 0; padding: 0; box-sizing: border-box; }                                                                                                                                                                              |
| body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #1a202c; font-size: 13px; }                                                                                                                                       |
| .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }                                                                                                                          |
| .logo-area { display: flex; align-items: center; gap: 12px; }                                                                                                                                                                     |
| .logo { width: 55px; height: 55px; background: #1a365d; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 10px; border-radius: 50%; text-align: center; line-height: 1.2; } |
| .company-info h2 { font-size: 16px; color: #1a365d; }                                                                                                                                                                             |
| .company-info p { font-size: 11px; color: #718096; }                                                                                                                                                                              |
| .doc-badge { background: #1a365d; color: #fff; padding: 8px 25px; text-align: center; border-radius: 4px; }                                                                                                                       |
| .doc-badge h1 { font-size: 20px; letter-spacing: 3px; }                                                                                                                                                                           |
| .doc-badge p { font-size: 11px; opacity: 0.8; }                                                                                                                                                                                   |
| .ribbon { background: #ebf4ff; padding: 12px 15px; border-left: 4px solid #1a365d; margin: 15px 0; display: flex; justify-content: space-between; font-size: 12px; color: #2d3748; }                                              |
| .info-grid { display: flex; justify-content: space-between; margin-bottom: 20px; }                                                                                                                                                |
| .info-box { width: 48%; padding: 12px; background: #f7fafc; border-radius: 4px; }                                                                                                                                                 |
| .info-box h3 { font-size: 10px; color: #1a365d; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }                                                                                                             |
| .info-box p { font-size: 11px; color: #4a5568; margin: 1px 0; }                                                                                                                                                                   |
| table { width: 100%; border-collapse: collapse; margin: 15px 0; }                                                                                                                                                                 |
| th { background: #1a365d; color: #fff; padding: 9px 8px; font-size: 11px; text-align: left; }                                                                                                                                     |
| th.num { text-align: right; }                                                                                                                                                                                                     |
| td { padding: 8px; border-bottom: 1px solid #e2e8f0; font-size: 12px; }                                                                                                                                                           |
| td.num { text-align: right; }                                                                                                                                                                                                     |
| tr:nth-child(even) td { background: #f7fafc; }                                                                                                                                                                                    |
| .totals-box { width: 350px; margin-left: auto; margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; }                                                                                               |
| .totals-box table { margin: 0; }                                                                                                                                                                                                  |
| .totals-box td { padding: 7px 12px; border-bottom: 1px solid #e2e8f0; font-size: 12px; }                                                                                                                                          |
| .totals-box tr:last-child td { border-bottom: none; }                                                                                                                                                                             |
| .totals-box .grand-total { background: #1a365d; color: #fff; }                                                                                                                                                                    |
| .totals-box .grand-total td { font-size: 15px; font-weight: bold; border-bottom: none; }                                                                                                                                          |
| .bank-info { margin-top: 25px; padding: 12px 15px; background: #fffff0; border: 1px solid #ecc94b; border-radius: 4px; font-size: 11px; color: #744210; }                                                                         |
| .bank-info h4 { font-size: 11px; margin-bottom: 4px; }                                                                                                                                                                            |
| .footer { margin-top: 25px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 10px; color: #a0aec0; text-align: center; }                                                                                              |
| </style>                                                                                                                                                                                                                          |
| </head>                                                                                                                                                                                                                           |
| <body>                                                                                                                                                                                                                            |
| <div class="header">                                                                                                                                                                                                              |
| <div class="logo-area">                                                                                                                                                                                                           |
| <div class="logo">ABC<br>TRADING</div>                                                                                                                                                                                            |
| <div class="company-info">                                                                                                                                                                                                        |
| <h2>ABC Trading Co., Ltd.</h2>                                                                                                                                                                                                    |
| <p>123 Trade Street, Los Angeles, CA 90001, USA</p>                                                                                                                                                                               |
| <p>Tax ID: US-XX-XXXXXXX | Tel: +1 (213) 555-0198</p>                                                                                                                                                                            |
| </div>                                                                                                                                                                                                                            |
| </div>                                                                                                                                                                                                                            |
| <div class="doc-badge">                                                                                                                                                                                                           |
| <h1>INVOICE</h1>                                                                                                                                                                                                                  |
| <p>{{invoice_number}}</p>                                                                                                                                                                                                         |
| </div>                                                                                                                                                                                                                            |
| </div>                                                                                                                                                                                                                            |
|                                                                                                                                                                                                                                   |
| <div class="ribbon">                                                                                                                                                                                                              |
| <span><strong>Invoice Date:</strong> {{invoice_date}}</span>                                                                                                                                                                      |
| <span><strong>Due Date:</strong> {{due_date}}</span>                                                                                                                                                                              |
| <span><strong>PO Reference:</strong> {{po_reference}}</span>                                                                                                                                                                      |
| </div>                                                                                                                                                                                                                            |
|                                                                                                                                                                                                                                   |
| <div class="info-grid">                                                                                                                                                                                                           |
| <div class="info-box">                                                                                                                                                                                                            |
| <h3>Bill To</h3>                                                                                                                                                                                                                  |
| <p><strong>{{buyer.name}}</strong></p>                                                                                                                                                                                            |
| <p>{{buyer.address}}</p>                                                                                                                                                                                                          |
| <p>{{buyer.city}}, {{buyer.country}}</p>                                                                                                                                                                                          |
| <p>Attn: {{buyer.contact}}</p>                                                                                                                                                                                                    |
| </div>                                                                                                                                                                                                                            |
| <div class="info-box">                                                                                                                                                                                                            |
| <h3>Ship To</h3>                                                                                                                                                                                                                  |
| <p>{{shipping.consignee}}</p>                                                                                                                                                                                                     |
| <p>{{shipping.port_of_loading}} → {{shipping.port_of_discharge}}</p>                                                                                                                                                              |
| <p>Via: {{shipping.method}}</p>                                                                                                                                                                                                   |
| <p>ETD: {{shipping.etd}}</p>                                                                                                                                                                                                      |
| </div>                                                                                                                                                                                                                            |
| </div>                                                                                                                                                                                                                            |
|                                                                                                                                                                                                                                   |
| <table>                                                                                                                                                                                                                           |
| <tr>                                                                                                                                                                                                                              |
| <th style="width:35px">#</th>                                                                                                                                                                                                     |
| <th>Description</th>                                                                                                                                                                                                              |
| <th style="width:55px">Qty</th>                                                                                                                                                                                                   |
| <th style="width:85px" class="num">Unit Price</th>                                                                                                                                                                                |
| <th style="width:95px" class="num">Amount (USD)</th>                                                                                                                                                                              |
| </tr>                                                                                                                                                                                                                             |
| {{#each items}}                                                                                                                                                                                                                   |
| <tr>                                                                                                                                                                                                                              |
| <td>{{inc @index}}</td>                                                                                                                                                                                                           |
| <td><strong>{{name}}</strong><br><span style="color:#718096;font-size:10px">HS Code: {{hs_code}} | {{sku}}</span></td>                                                                                                           |
| <td class="num">{{qty}}</td>                                                                                                                                                                                                      |
| <td class="num">{{format_price unit_price}}</td>                                                                                                                                                                                  |
| <td class="num"><strong>{{format_price total}}</strong></td>                                                                                                                                                                      |
| </tr>                                                                                                                                                                                                                             |
| {{/each}}                                                                                                                                                                                                                         |
| </table>                                                                                                                                                                                                                          |
|                                                                                                                                                                                                                                   |
| <div class="totals-box">                                                                                                                                                                                                          |
| <table>                                                                                                                                                                                                                           |
| <tr><td style="width:180px">Subtotal</td><td class="num">${{format_price subtotal}}</td></tr>                                                                                                                                     |
| <tr><td>Freight ({{shipping.method}})</td><td class="num">${{format_price shipping_cost}}</td></tr>                                                                                                                               |
| <tr><td>Insurance (0.8%)</td><td class="num">${{format_price insurance}}</td></tr>                                                                                                                                                |
| <tr><td>Total Amount Due</td><td class="num" style="font-weight:bold">${{format_price grand_total}}</td></tr>                                                                                                                     |
| <tr class="grand-total"><td>AMOUNT IN WORDS</td><td class="num" style="font-size:11px">{{amount_in_words}}</td></tr>                                                                                                              |
| </table>                                                                                                                                                                                                                          |
| </div>                                                                                                                                                                                                                            |
|                                                                                                                                                                                                                                   |
| <div class="bank-info">                                                                                                                                                                                                           |
| <h4>Banking Details</h4>                                                                                                                                                                                                          |
| <p>Bank of America | Account: 1234-5678-9012-3456 | SWIFT: BOFAUS3N | Routing: 026009593</p>                                                                                                                                   |
| </div>                                                                                                                                                                                                                            |
|                                                                                                                                                                                                                                   |
| <div class="footer">                                                                                                                                                                                                              |
| This invoice is valid for payment within 30 days. Please quote invoice number for all correspondence.                                                                                                                             |
| </div>                                                                                                                                                                                                                            |
| </body>                                                                                                                                                                                                                           |
| </html>

接着生成合同模板:

帮我生成一份外贸销售合同的 HTML 模板和 JSON 数据,包含合同条款、双方信息、签字栏、贸易术语。

至此,三套文档的模板和数据全部准备好,用时不到 5 分钟,全部通过自然语言完成。


Step 2:在 ComPDF 在线 Demo 中验证生成效果

1. 访问 ComPDF Generation API 在线 Demo

打开浏览器,访问 ComPDF 官方提供的免费在线自动化PDF文件生成体验页面,支持:

  • HTML 源码编辑区 — 可直接粘贴或修改模板
  • JSON 数据编辑区 — 粘贴数据后自动绑定模板变量
  • 「Generate PDF」按钮 — 一键调用 API 生成 PDF
  • PDF 预览和下载 — 在线预览或保存到本地

2. 上传模板和数据进行验证

操作非常简单:

  1. 将 AI Agent 生成的 order_template.html 全部内容复制,粘贴到 Demo 的 HTML 区
  2. order_data.json 全部内容复制,粘贴到 JSON 数据区
  3. 点击 「Generate PDF」 按钮

ComPDF Generation API 会实时渲染模板,填充数据,生成标准的 PDF 文件。

生成效果如下——订单文档的 PDF 输出示例:

发票文档的 PDF 输出示例:

合同文档的 PDF 输出:

可以看到,字体、颜色、表格、边框等所有样式都得到完整保留,输出质量完全达到商业文档标准。

迭代优化:直接编辑或让 AI Agent 修改

不满意生成效果?ComPDF 的 Demo 页面支持两种修改方式:

方式一:直接编辑在 Demo 页面的 HTML 编辑区直接修改 CSS 或结构,重新点击生成即可实时看到效果变化。比如调整字体大小、修改表格列宽、更换颜色主题等。

**方式二:让 AI Agent 修改(推荐)**将修改需求用自然语言告诉 AI Agent,例如:

请在我的订单模板中插入公司 LOGO(位置在右上角),公司名称为 ABC Trading Co., Ltd.,主题色改为深蓝色 #1a365d,商品表格增加序号列。

AI Agent 会立即理解你的需求,更新模板文件并返回新的代码。你只需将新代码复制到 Demo 页面重新生成即可。


Step 3:让 AI Agent 生成调用ComPDF API 创建文档自动化生成的可视化程序

这是整个工作流的高潮——AI Agent 不再只是生成文件,而是为你创建一个完整可运行的程序。

发送最终指令

将以下指令发送给 AI Agent (当AI让你发送认证的密钥等资料的时候,您可以注册ComPDF Cloud获得):

帮我调用 ComPDF Generation API 来创建一个自动化创建发票/订单/合同的程序,并生成可视化的页面

AI Agent 生成的可视化界面示例

AI Agent 会生成一个完整的 Web 应用界面,如下图所示(下面界面就是由AI生成的,您可以直接让AI生成您想要的页面,整个过程就跟别人发个消息一样简单):

界面包含三大核心区域:

  1. 文档类型切换栏 — 一键切换 Purchase Order / Invoice / Sales Contract
  2. HTML 模板 + JSON 数据编辑区 — 左右分栏,支持直接编辑或上传文件
  3. 生成结果区 — 显示生成的文件名并提供下载按钮

填写你的 ComPDF API Key,点击「Generate PDF」按钮,API 调用过程中会实时显示状态:

程序运行逻辑

这个可视化程序的工作原理非常简单:

你输入 HTML 模板 + JSON 数据
        ↓
点击「Generate PDF」按钮
        ↓
前端将数据发送到 ComPDF Generation APIAPI 实时生成 PDF 文件
        ↓
页面展示文件名并提供下载按钮

整个过程在几秒内完成,支持订单、发票、合同三种文档类型一键切换,每种类型都预置了对应的模板和数据,开箱即用。

API Key 配置说明

在生成的程序中,你需要配置自己的 API Key。获取方式非常简单:

  1. 打开 https://api.compdf.com/signup
  2. 注册 ComPDF Cloud 账号(邮箱注册即可)
  3. 在控制台获取你的 API Key
  4. 粘贴到程序中的 API Key 输入框

免费用户每月享有 200+ 次文件处理额度,对于个人测试和日常使用完全充足。如需更高处理量,可以选择高性价比的付费套餐。


ComPDF Generation API 核心能力

了解背后的技术支撑,能帮你更好地发挥这套方案的潜力。

HTML/CSS 转 PDF 的高保真渲染

ComPDF Generation API 的核心能力是从 HTML/CSS 模板生成 PDF。它完整保留字体、颜色、布局、表格、图片等所有样式属性,支持 CSS @page 规则控制打印版式。这意味着 AI Agent 生成的模板中的任何设计细节都能精准还原到 PDF 输出中。

模板变量与数据绑定

支持在 HTML 模板中使用 {{变量名}} 占位符,通过 JSON 数据动态填充。一个模板配合不同的 JSON 数据,即可生成成千上万份差异化的文档——非常适合批量生成不同客户的发票或订单确认书。

批量处理与异步任务

支持单次请求提交最多 500 份文档的批量生成任务,异步处理完成后通过回调或轮询获取结果。对于需要大量生成发票/合同的业务场景,可显著提升处理效率。


效果对比:自然语言 + AI Agent vs 传统方式

维度 传统方式 AI Agent 方式
编写 HTML 模板 手动编写,30-60 分钟 自然语言描述,秒级生成
构造 JSON 数据 手动构造,15-30 分钟 AI 自动生成示例数据
编写 API 调用代码 1-2 小时 AI Agent 自动完成
构建前端界面 2-4 小时 AI Agent 自动生成
总耗时 4-8 小时 15-30 分钟
技术门槛 需要前后端开发能力 零代码,只需自然语言

免费额度价值

每月 200+ 次免费处理,按每次生成一份文档计算,足以覆盖个人测试和小团队的日常使用。按传统方式,搭建同样的能力需要购买服务器、部署服务、维护系统,成本和技术门槛远高于此。


最佳实践与进阶技巧

如何写出高效的 AI Agent 指令

指令越具体,AI Agent 生成的模板越精准。建议包含以下要素:

  • 文档类型 — 订单/发票/合同/报价单等
  • 业务场景 — 外贸/电商/内贸/服务合同等
  • 字段清单 — 需要包含哪些数据字段
  • 视觉偏好 — 颜色/字体/LOGO 位置等
  • 语言要求 — 中文/英文/双语

示例:”生成一份英文外贸形式发票模板,公司为深圳科技公司,包含产品名称、HS编码、数量、单价、总价,主题色为蓝色,LOGO 在左上角。”

模板复用的技巧

设计模板时,将公司名称、LOGO、地址等固定信息直接在 HTML 中硬编码,将订单号、客户名、商品列表等动态内容使用变量占位符。这样同一模板配合不同 JSON 数据即可适配不同客户和不同订单。

从 Demo 验证到生产环境的迁移

在 ComPDF 在线 Demo 验证通过后,将 AI Agent 生成的可视化程序部署到你的服务器,或使用 Vercel / Netlify 等平台一键托管。在生产环境中,建议将模板存储在数据库或对象存储中,与业务系统的订单数据联动,实现全自动的文档生成流水线。


FAQs

我没有编程基础,能用这个方案吗?

完全可以。整个流程的核心是用自然语言和 AI Agent 交互,你只需要描述你的需求,AI Agent 会帮你完成所有技术工作。ComPDF 在线 Demo 也不需要任何编程知识即可操作。

免费额度 200+ 次具体怎么算?

注册 ComPDF Cloud 后,每月自动获得 200+ 次免费文件处理额度。每次调用 Generation API 生成一份 PDF 文件计为一次。超出后可选购付费套餐,价格高性价比。

AI Agent 生成的程序支持哪些部署方式?

AI Agent 通常生成基于 Python Flask/FastAPI 或 Node.js Express 的后端 + HTML/React 的前端程序,可以本地运行,也可以部署到 Vercel、Netlify、Railway 等云平台。

支持生成中文内容的 PDF 吗?

支持。ComPDF Generation API 完整支持中文字体渲染,只需在 HTML 模板中指定中文字体(如 SimSun、Microsoft YaHei)或使用通用 font-family,即可生成高质量的中文文档。


总结:开启你的 AI 文档自动化之旅

三步上手:

  1. 注册 ComPDF Cloud免费获取 API Key
  2. 用自然语言告诉 AI Agent 你的需求,生成模板和数据
  3. 在 ComPDF 在线 Demo 验证效果,或让 AI Agent 直接生成可视化程序

从零到生成第一份 PDF,几分钟即可完成。

除了订单、发票、合同,这套方案同样适用于报价单、装箱单、提单、报关单等国际贸易文档。也可以尝试用 AI Agent 生成更复杂的模板——如多语言模板、多币种发票、包含图表的数据报表等。ComPDF Generation API 的灵活性和 AI Agent 的创造力相结合,可能性远超你的想象。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
29
粉丝
1
喜欢
5
收藏
7
排名:1577
访问:2041
私信
所有博文
社区赞助商