使用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 API
        ↓
API 实时生成 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 的创造力相结合,可能性远超你的想象。

相关推荐
guslegend1 小时前
第3节:智能体配置表设计
数据库·人工智能
HIT_Weston1 小时前
98、【Agent】【OpenCode】task 工具提示词(子 Agent)
人工智能·agent·opencode
godspeed_lucip1 小时前
LLM和Agent——专题5: LLM Ops 入门(2)
人工智能·python
HelloDong1 小时前
Claude Code Dynamic Workflows 实战:让 AI 自己写脚本调度 1000 个 subagent
人工智能
ai产品老杨1 小时前
【架构实战】如何基于 Docker 与边缘计算构建企业级 AI 视频管理平台?打通 GB28181/RTSP 统一接入与异构算力调度,全量源码交付破解集成痛点
人工智能·docker·架构
Chengbei111 小时前
小程序 AI 渗透新工具MCP!打通调试与安全检测、网络抓包、接口分析、越权检测一站式实现
人工智能·安全·web安全·搜索引擎·网络安全·小程序·系统安全
周易宅1 小时前
深度解析 AI Agent 的工具调用机制:从技能激活到动态路由
人工智能·ai·agent
意图共鸣1 小时前
意图共鸣科技《认知智能白皮书》——认知操作系统(COS):大模型之上的“认知中间件”如何调度边界
人工智能·科技·架构
升鲜宝供应链及收银系统源代码服务1 小时前
升鲜宝 AI 报表原型与接口设计报表模板、交互原型、数据接口与集成规范(一)---升鲜宝生鲜配送供应链管理系统源代码服务
大数据·人工智能·生鲜供应链源代码·供应链源代码出售·生鲜配送源代码服务·门店连锁系统源代码·猪肉生产加工系统源代码