Passa al contenuto principale
PDF4me APIIntegrazioniBase di conoscenzaEstensioniTester APIBlog

Insert HTML - Guida ai contenuti avanzati

PDF4meIl motore di generazione documenti di 's supporta direttamente HTML inserimento all'interno dei modelli di Word, che consente di aggiungere contenuti con formattazione avanzata, stili di testo complessi e strutturati HTML contenuti in modo dinamico. Questa funzionalità è particolarmente utile quando l'origine dati contiene contenuti preformattati HTML contenuto.

HTML Sintassi di inserimento​

Insert HTML contenuto utilizzando il -html Passa al tuo campo di unione:

<<[token] -html>>

IL -html L'interruttore indica al motore di template di analizzare il valore del campo come HTML e visualizzarlo con la formattazione appropriata nel documento generato.

Base HTML Inserimento​

Testo formattato in modo semplice​

Fonte dei dati:

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

Sintassi del modello:

<<[apicalls] -html>>

Output generato: Il testo apparirà con "PDF4me'S API Chiamate o chiamate automatiche" in grassetto, seguito dal resto del testo in formato normale.

Supportato HTML Elementi​

PDF4me'S HTML il rendering supporta i comuni HTML tag di formattazione:

Tag di formattazione del testo​

Testo in grassetto:

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

Testo in corsivo:

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

Sottolineare:

<u>Underlined text</u>

Barrato:

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

Elementi strutturali​

Paragrafi:

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

Interruzioni di riga:

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

Intestazioni:

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

Elenchi​

Liste non ordinate:

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

Elenchi ordinati:

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

Stile del testo​

Colore del carattere:

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

Dimensione del carattere:

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

Famiglia di caratteri:

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

Esempi pratici​

Esempio 1: Descrizione del prodotto formattata​

Dati:

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

Modello:

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

Esempio 2: Termini e condizioni​

Dati:

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

Modello:

<<[terms] -html>>

Esempio 3: Annuncio formattato​

Dati:

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

Modello:

<<[announcement] -html>>

Combinazione HTML con logica modello​

Integrare HTML inserimento con cicli foreach e istruzioni condizionali.

HTML Contenuto negli elenchi​

Modello:

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

<</foreach>>

Dati:

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

Condizionale HTML Visualizzazione​

Modello:

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

<<[mainContent] -html>>

Dati:

{
  "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 Tavoli​

Inserimento completato HTML Strutture tabellari per presentazioni di dati complessi.

Esempio: HTML Tavolo​

Dati:

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

Modello:

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

Documenti a contenuto misto​

Unire i campi di unione standard con HTML Contenuti per la generazione flessibile di documenti.

Esempio: Report in formato misto​

Modello:

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 Buone pratiche di formattazione​

HTML Linee guida sui contenuti​

  1. Adatto HTML - Utilizzare formule ben formate e valide HTML ricarico
  2. Stili in linea - Preferire in linea CSS stili su fogli di stile esterni
  3. Strutture semplici - Mantenere HTML strutture ragionevolmente semplici
  4. Rendering di prova - Verifica quanto diverso HTML rendering nei documenti di output
  5. Fuga dei personaggi speciali - Eseguire correttamente l'escape delle virgolette e dei caratteri speciali in HTML

Consigli di stile​

  1. Formattazione di base - Attieniti alle basi HTML tag di formattazione
  2. Evitare il complesso CSS - Complesso CSS potrebbe non essere visualizzato come previsto
  3. Compatibilità dei caratteri - Utilizzare famiglie di caratteri ampiamente disponibili
  4. Codici colore - Utilizzare i codici colore esadecimali (#RRGGBB) per uniformità
  5. Unità di misura - Utilizzare pt (punti) per le dimensioni dei caratteri

Considerazioni sulla sicurezza​

Quando si accetta HTML da fonti esterne:

  1. Sanificare l'input - Pulizia di potenziali danni HTML
  2. Convalida la struttura - Verifica HTML è ben formato
  3. Limita i tag - Valutare la possibilità di limitare ciò che è consentito HTML tag
  4. Input utente di escape - Gestire correttamente i contenuti generati dagli utenti
  5. Output del test - Esaminare i documenti generati per individuare contenuti inattesi

HTML vs. Formattazione del modello​

Quando utilizzare HTML Inserimento​

Utilizzo HTML Quando:

  • Il contenuto proviene da WYSIWYG redattori
  • È richiesta una formattazione complessa
  • Il contenuto include tabelle, elenchi e formattazione mista.
  • Conservazione del testo formattato proveniente da fonti esterne

Utilizza la formattazione del modello quando:

  • È sufficiente una semplice formattazione del testo.
  • Lavorare con dati strutturati
  • Massimo controllo sulla formattazione dell'output
  • La prestazione è fondamentale

Limitazioni e considerazioni​

Limitazioni di rendering​

  1. CSS supporto - Limitato CSS supporto; gli stili in linea funzionano meglio
  2. Layout complessi - Molto complesso HTML potrebbe non essere visualizzato perfettamente
  3. JavaScript - JavaScript In HTML non viene eseguito
  4. Risorse esterne - CSS/le immagini potrebbero non caricarsi
  5. Funzionalità specifiche del browser - Avanzato HTML5 alcune funzionalità potrebbero non essere supportate

Prestazione​

  1. Tempo di elaborazione - HTML l'analisi aggiunge un sovraccarico di elaborazione
  2. Contenuti di grandi dimensioni - Molto grande HTML Le corde possono influire sulle prestazioni
  3. molteplici casi - Molti HTML Gli inserimenti possono rallentare la generazione

Esempio completo: Modello di newsletter​

Modello:

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

<<[headerHtml] -html>>

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

<<[footerHtml] -html>>

Dati:

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

:::mancia HTML Test Eseguire sempre i test HTML inserimento con dati di esempio per verificare che il rendering appaia come previsto. Diversi formati di documento (Word, PDF) può rendere HTML Leggermente diverso.

:::

:::avvertimento HTML Complessità Mantieni HTML contenuto ragionevolmente semplice per ottenere i migliori risultati. Molto complesso HTML strutture con avanzate CSS Potrebbe non essere visualizzato perfettamente in tutti i formati di output.

:::