Zum Hauptinhalt springen
PDF4me APIIntegrationenWissensdatenbankErweiterungenAPI-TesterBlog

Einfügen HTML Leitfaden für umfangreiche Inhalte

PDF4meDie Dokumentengenerierungs-Engine von unterstützt direkte HTML Einfügen in Word-Vorlagen, wodurch Sie reich formatierte Inhalte, komplexe Textformatierungen und strukturierte Elemente hinzufügen können. HTML Inhalte dynamisch erstellen. Diese Funktion ist besonders nützlich, wenn Ihre Datenquelle vorformatierte Inhalte enthält. HTML Inhalt.

HTML Einfügesyntax​

Einfügen HTML Inhalte, die die -html Tauschen Sie mit Ihrem Seriendruckfeld:

<<[token] -html>>

Der -html Der Schalter weist die Template-Engine an, den Feldwert zu parsen als HTML und es mit der entsprechenden Formatierung im generierten Dokument darstellen.

Grundkenntnisse HTML Einführen​

Einfacher formatierter Text​

Datenquelle:

{
  "apicalls": "<b>PDF4me's API Calls or Automation calls</b> is the fuel for creating robust and powerful workflows to automate your document jobs. It lets you smoothly access various document generation and management features provided by PDF4me."
}

Vorlagensyntax:

<<[apicalls] -html>>

Generierte Ausgabe: Der Text wird mit folgendem Text angezeigt:PDF4me'S API Anrufe oder Automatisierungsanrufe" in deutlich, gefolgt vom restlichen Text in normaler Formatierung.

Unterstützt HTML Elemente​

PDF4me'S HTML Rendering unterstützt gängige HTML Formatierungs-Tags:

Textformatierungs-Tags​

Fettdruck:

<b>Bold text</b>
<strong>Strong text</strong>

Kursiver Text:

<i>Italic text</i>
<em>Emphasized text</em>

Unterstreichen:

<u>Underlined text</u>

Durchgestrichen:

<s>Strikethrough text</s>
<del>Deleted text</del>

Strukturelemente​

Absätze:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Zeilenumbrüche:

Line one<br>Line two<br>Line three

Überschriften:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Listen​

Ungeordnete Listen:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Geordnete Listen:

<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Textstyling​

Schriftfarbe:

<span style="color: red;">Red text</span>
<span style="color: #0000FF;">Blue text</span>

Schriftgröße:

<span style="font-size: 14pt;">Larger text</span>
<span style="font-size: 10pt;">Smaller text</span>

Schriftfamilie:

<span style="font-family: Arial;">Arial text</span>
<span style="font-family: 'Times New Roman';">Times text</span>

Praktische Beispiele​

Beispiel 1: Formatierte Produktbeschreibung​

Daten:

{
  "productDescription": "<h2>Premium Laptop Pro</h2><p><b>Features:</b></p><ul><li>Intel Core i9 Processor</li><li>32GB RAM</li><li>1TB SSD Storage</li><li>15.6\" 4K Display</li></ul><p><i>Perfect for professionals and power users.</i></p>"
}

Vorlage:

Product Details:
<<[productDescription] -html>>

Beispiel 2: Allgemeine Geschäftsbedingungen​

Daten:

{
  "terms": "<h3>Terms and Conditions</h3><ol><li><b>Payment:</b> Payment due within 30 days of invoice date.</li><li><b>Warranty:</b> Limited 1-year warranty on all products.</li><li><b>Returns:</b> Returns accepted within <u>14 days</u> of purchase.</li></ol><p><i>For complete terms, visit our website.</i></p>"
}

Vorlage:

<<[terms] -html>>

Beispiel 3: Formatierte Ankündigung​

Daten:

{
  "announcement": "<div style='text-align: center;'><h1 style='color: #0066CC;'>Important Notice</h1><p><b>System Maintenance Scheduled</b></p><p>Our systems will undergo maintenance on <u>January 15, 2024</u> from <b>2:00 AM to 6:00 AM EST</b>.</p><p><i>We apologize for any inconvenience.</i></p></div>"
}

Vorlage:

<<[announcement] -html>>

Kombination HTML mit Template-Logik​

Integrieren HTML Einfügen mit foreach-Schleifen und bedingten Anweisungen.

HTML Inhalte in Listen​

Vorlage:

<<foreach [section in sections]>>
<<[section.htmlContent] -html>>

<</foreach>>

Daten:

{
  "sections": [
    {
      "htmlContent": "<h3>Section 1</h3><p>Content with <b>bold</b> and <i>italic</i> text.</p>"
    },
    {
      "htmlContent": "<h3>Section 2</h3><ul><li>Point A</li><li>Point B</li></ul>"
    }
  ]
}

Konditional HTML Anzeige​

Vorlage:

<<if [hasWarning]>>
<<[warningHtml] -html>>
<</if>>

<<[mainContent] -html>>

Daten:

{
  "hasWarning": true,
  "warningHtml": "<div style='background-color: #FFF3CD; padding: 10px; border: 1px solid #FFC107;'><b>⚠ Warning:</b> Please review all terms carefully before proceeding.</div>",
  "mainContent": "<p>Your contract details are listed below...</p>"
}

HTML Tabellen​

Einfügen vollständig HTML Tabellenstrukturen für komplexe Datenpräsentationen.

Beispiel: HTML Tisch​

Daten:

{
  "salesTable": "<table border='1' cellpadding='5' cellspacing='0'><tr><th>Product</th><th>Units Sold</th><th>Revenue</th></tr><tr><td>Product A</td><td>150</td><td>$15,000</td></tr><tr><td>Product B</td><td>230</td><td>$23,000</td></tr><tr><td><b>Total</b></td><td><b>380</b></td><td><b>$38,000</b></td></tr></table>"
}

Vorlage:

Sales Summary:
<<[salesTable] -html>>

Dokumente mit gemischtem Inhalt​

Kombinieren Sie Standard-Serienfelder mit HTML Inhalte für die flexible Dokumentenerstellung.

Beispiel: Bericht in gemischten Formaten​

Vorlage:

Report Title: <<[reportTitle]:caps>>
Generated: <<[generatedDate]:"MMMM dd, yyyy">>

Executive Summary:
<<[executiveSummary] -html>>

Details:
<<foreach [item in items]>>
• <<[item.name]>> - <<[item.status]>>
<</foreach>>

Conclusion:
<<[conclusion] -html>>

HTML Best Practices für die Formatierung​

HTML Inhaltsrichtlinien​

  1. Gültig HTML - Verwenden Sie wohlgeformte, gültige HTML Aufschlag
  2. Inline-Stile - Inline-Code bevorzugen CSS Stile über externe Stylesheets
  3. Einfache Strukturen - Halten HTML Strukturen im Wesentlichen einfach
  4. Testdarstellung - Testen Sie, wie unterschiedlich HTML Renderings in Ausgabedokumenten
  5. Escape-Sonderzeichen - Anführungszeichen und Sonderzeichen korrekt maskieren in HTML

Styling-Empfehlungen​

  1. Grundlegende Formatierung - Bleiben Sie bei den Grundlagen HTML Formatierungstags
  2. Vermeiden Sie komplexe CSS - Komplex CSS Die Darstellung entspricht möglicherweise nicht den Erwartungen.
  3. Schriftartkompatibilität - Verwenden Sie weit verbreitete Schriftfamilien
  4. Farbcodes - Verwenden Sie Hex-Farbcodes (#RRGGBB) für eine einheitliche Darstellung.
  5. Größeneinheiten - Verwenden Sie pt (Punkte) für Schriftgrößen.

Sicherheitsüberlegungen​

Bei Annahme HTML aus externen Quellen:

  1. Eingabe desinfizieren - Potenziell schädliche Substanzen entfernen HTML
  2. Struktur validieren - Verifizieren HTML ist wohlgeformt
  3. Limit-Tags - Erwägen Sie, die zulässigen Grenzen einzuschränken HTML Tags
  4. Benutzereingaben werden maskiert - Benutzergenerierte Inhalte korrekt maskieren
  5. Testausgabe - Überprüfen Sie die generierten Dokumente auf unerwartete Inhalte

HTML vs. Vorlagenformatierung​

Wann verwenden? HTML Einführen​

Verwenden HTML Wann:

  • Der Inhalt stammt von WYSIWYG Redakteure
  • Komplexe Formatierung erforderlich
  • Der Inhalt umfasst Tabellen, Listen und gemischte Formatierungen.
  • Erhaltung von reichhaltigen Texten aus externen Quellen

Verwenden Sie die Vorlagenformatierung, wenn:

  • Eine einfache Textformatierung genügt.
  • Arbeiten mit strukturierten Daten
  • Maximale Kontrolle über die Ausgabeformatierung
  • Die Leistung ist entscheidend

Einschränkungen und Überlegungen​

Einschränkungen bei der Darstellung​

  1. CSS Unterstützung - Begrenzt CSS Unterstützung; Inline-Styles funktionieren am besten
  2. Komplexe Layouts - Sehr komplex HTML Die Darstellung kann fehlerhaft sein.
  3. JavaScript - JavaScript In HTML wird nicht ausgeführt
  4. Externe Ressourcen - Extern CSS/images wird möglicherweise nicht geladen
  5. Browserspezifische Funktionen - Fortschrittlich HTML5 Funktionen werden möglicherweise nicht unterstützt.

Leistung​

  1. Bearbeitungszeit - HTML Das Parsen verursacht zusätzlichen Verarbeitungsaufwand.
  2. Großer Inhalt - Sehr groß HTML Saiten können die Leistung beeinträchtigen
  3. Mehrere Instanzen - Viele HTML Einfügungen können die Generation verlangsamen

Vollständiges Beispiel: Newsletter-Vorlage​

Vorlage:

<<[companyName]:upper>> Newsletter - <<[issueDate]:"MMMM yyyy">>

<<[headerHtml] -html>>

Articles:
<<foreach [article in articles]>>
<<[article.contentHtml] -html>>
---
<</foreach>>

<<[footerHtml] -html>>

Daten:

{
  "companyName": "Tech Innovations Inc.",
  "issueDate": "2024/01/01",
  "headerHtml": "<div style='background-color: #4A90E2; color: white; padding: 20px; text-align: center;'><h1>Monthly Tech Update</h1><p>Your source for the latest technology news</p></div>",
  "articles": [
    {
      "contentHtml": "<h3>New Product Launch</h3><p>We're excited to announce our <b>latest innovation</b> in cloud computing. <a href='https://example.com/product'>Learn more</a></p>"
    },
    {
      "contentHtml": "<h3>Industry Insights</h3><p>Recent studies show that <i>automation</i> is transforming the workplace. Here's what you need to know:</p><ul><li>Increased efficiency</li><li>Cost savings</li><li>Better accuracy</li></ul>"
    }
  ],
  "footerHtml": "<p style='font-size: 10pt; color: #666;'><i>© 2024 Tech Innovations Inc. All rights reserved.</i></p>"
}

:::Tipp HTML Testen Immer testen HTML Einfügen von Beispieldaten zur Überprüfung der Darstellung. Verschiedene Dokumentformate (Word, PDF) kann darstellen HTML etwas anders.

:::

:::Warnung HTML Komplexität Beibehalten HTML Der Inhalt sollte für optimale Ergebnisse möglichst einfach sein. Sehr komplex HTML Strukturen mit fortschrittlichen CSS Die Darstellung kann in allen Ausgabeformaten fehlerhaft sein.

:::