Insérer HTML - Guide du contenu riche

PDF4meLe moteur de génération de documents de prend en charge directement HTML l'insertion dans les modèles Word, vous permettant d'ajouter du contenu richement formaté, un style de texte complexe et une structure HTML le contenu de manière dynamique. Cette fonctionnalité est particulièrement utile lorsque votre source de données contient du contenu préformaté. HTML contenu.

---

HTML Syntaxe d'insertion

Insérer HTML contenu utilisant le -html échanger avec votre champ de fusion :

<<[token] -html>>

Le -html L'option switch indique au moteur de modèles d'analyser la valeur du champ comme HTML et l'afficher avec une mise en forme appropriée dans le document généré.

---

Basique HTML Insertion

Texte formaté simple

Source des données :

{
  "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."
}

Syntaxe du modèle :

<<[apicalls] -html>>

Résultat généré : Le texte apparaîtra avec «PDF4me's API Appels ou appels automatisés dans audacieux, suivi du reste du texte en formatage normal.

---

Soutenu HTML Éléments

PDF4me's HTML Le rendu prend en charge les courants HTML balises de formatage :

Balises de mise en forme de texte

Texte en gras :

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

Texte en italique :

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

Souligner:

<u>Underlined text</u>

Barré :

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

---

Éléments structuraux

Paragraphes :

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

Sauts de ligne :

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

Titres :

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

---

Listes

Listes non ordonnées :

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

Listes ordonnées :

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

---

Mise en forme du texte

Couleur de la police :

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

Taille de la police :

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

Famille de polices :

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

---

Exemples pratiques

Exemple 1 : Description de produit formatée

Données:

{
  "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>"
}

Modèle:

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

---

Exemple 2 : Conditions générales

Données:

{
  "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>"
}

Modèle:

<<[terms] -html>>

---

Exemple 3 : Annonce formatée

Données:

{
  "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>"
}

Modèle:

<<[announcement] -html>>

---

Combinaison HTML avec la logique de modèle

Intégrer HTML Insertion avec boucles foreach et instructions conditionnelles.

HTML Contenu des listes

Modèle:

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

<</foreach>>

Données:

{
  "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>"
    }
  ]
}

---

conditionnel HTML Afficher

Modèle:

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

<<[mainContent] -html>>

Données:

{
  "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 Tables

Insérer complètement HTML Structures de tableaux pour les présentations de données complexes.

Exemple: HTML Tableau

Données:

{
  "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>"
}

Modèle:

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

---

Documents à contenu mixte

Combinez les champs de fusion standard avec HTML contenu pour la génération flexible de documents.

Exemple : Rapport à format mixte

Modèle:

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 Meilleures pratiques de mise en forme

HTML Directives relatives au contenu

1. Valide HTML - Utilisez des formes correctes et valides HTML marge
2. Styles en ligne - Préférez l'en ligne CSS styles par-dessus les feuilles de style externes
3. structures simples - Garder HTML des structures relativement simples
4. Rendu de test - Testez à quel point les différences HTML rendu dans les documents de sortie
5. Échappez aux personnages spéciaux - Échappez correctement les guillemets et les caractères spéciaux dans HTML

Recommandations de style

1. Mise en forme de base - Tenez-vous-en aux fondamentaux HTML balises de formatage
2. Évitez les complexes CSS - Complexe CSS peut ne pas s'afficher comme prévu
3. Compatibilité des polices - Utilisez des familles de polices largement disponibles.
4. Codes de couleur Utilisez les codes de couleur hexadécimaux (#RRGGBB) pour plus de cohérence.
5. Unités de taille - Utilisez pt (points) pour les tailles de police

---

Considérations de sécurité

Lors de l'acceptation HTML provenant de sources externes :

1. Assainir les entrées - Nettoyer les zones potentiellement malveillantes HTML
2. Valider la structure - Vérifier HTML est bien formé
3. Limiter les balises - Envisagez de restreindre les autorisations HTML étiquettes
4. Échapper à la saisie utilisateur - Échappez correctement le contenu généré par l'utilisateur
5. Sortie de test - Vérifier que les documents générés ne contiennent pas de contenu inattendu.

---

HTML vs. Mise en forme de modèle

Quand l'utiliser HTML Insertion

Utiliser HTML quand:

• Le contenu provient de WYSIWYG rédacteurs
• Une mise en forme complexe est requise
• Le contenu comprend des tableaux, des listes et une mise en forme mixte.
• Préserver le texte enrichi provenant de sources externes

Utilisez la mise en forme de modèle lorsque :

• Une mise en forme de texte simple suffit.
• Travailler avec des données structurées
• Contrôle maximal sur la mise en forme de la sortie
• La performance est essentielle

---

Limites et considérations

Limitations de rendu

1. CSS soutien - Limité CSS prise en charge ; les styles en ligne fonctionnent le mieux
2. Agencements complexes - Très complexe HTML peut ne pas être parfaitement rendu
3. JavaScript - JavaScript dans HTML n'est pas exécuté
4. Ressources externes - Externe CSSLes images peuvent ne pas se charger.
5. Fonctionnalités spécifiques au navigateur - Avancé HTML5 Certaines fonctionnalités peuvent ne pas être prises en charge

Performance

1. Temps de traitement - HTML L'analyse syntaxique ajoute une surcharge de traitement
2. Contenu volumineux - Très grand HTML Les chaînes de caractères peuvent avoir un impact sur les performances
3. Plusieurs instances - Beaucoup HTML Les insertions peuvent ralentir la génération

---

Exemple complet : Modèle de newsletter

Modèle:

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

<<[headerHtml] -html>>

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

<<[footerHtml] -html>>

Données:

{
  "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>"
}

---

:::conseil HTML Tests Toujours tester HTML L'insertion avec des données d'exemple permet de vérifier que le rendu est conforme aux attentes. Différents formats de documents (Word, PDF) peut rendre HTML légèrement différemment.

:::

:::avertissement HTML Complexité

Conserver HTML Un contenu raisonnablement simple pour de meilleurs résultats. Très complexe HTML structures avec des avancées CSS Le rendu peut ne pas être optimal dans tous les formats de sortie.

:::