Saltar al contenido principal
PDF4me APIIntegracionesBase de conocimientosExtensionesProbador de APIBlog

Insertar HTML - Guía de contenido enriquecido

PDF4meEl motor de generación de documentos admite la dirección HTML inserción dentro de plantillas de Word, lo que le permite agregar contenido con formato enriquecido, estilos de texto complejos y estructurado. HTML contenido dinámicamente. Esta capacidad es particularmente útil cuando su fuente de datos contiene contenido preformateado. HTML contenido.

HTML Sintaxis de inserción​

Insertar HTML contenido utilizando el -html Intercambia con tu campo de combinación:

<<[token] -html>>

El -html El interruptor indica al motor de plantillas que analice el valor del campo como HTML y mostrarlo con el formato adecuado en el documento generado.

Básico HTML Inserción​

Texto con formato simple​

Fuente de datos:

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

Sintaxis de la plantilla:

<<[apicalls] -html>>

Salida generada: El texto aparecerá con "PDF4me's API Llamadas o llamadas de automatización" en atrevido, seguido del resto del texto en formato normal.

Compatible HTML Elementos​

PDF4me's HTML La representación admite funciones comunes HTML etiquetas de formato:

Etiquetas de formato de texto​

Texto en negrita:

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

Texto en cursiva:

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

Subrayar:

<u>Underlined text</u>

Tachado:

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

Elementos estructurales​

Párrafos:

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

Saltos de línea:

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

Encabezados:

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

Liza​

Listas no ordenadas:

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

Listas ordenadas:

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

Estilo de texto​

Color de la fuente:

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

Tamaño de fuente:

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

Familia de fuentes:

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

Ejemplos prácticos​

Ejemplo 1: Descripción del producto formateada​

Datos:

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

Plantilla:

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

Ejemplo 2: Términos y condiciones​

Datos:

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

Plantilla:

<<[terms] -html>>

Ejemplo 3: Anuncio formateado​

Datos:

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

Plantilla:

<<[announcement] -html>>

Combinando HTML con lógica de plantilla​

Integrar HTML Inserción con bucles foreach y sentencias condicionales.

HTML Contenido en listas​

Plantilla:

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

<</foreach>>

Datos:

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

Condicional HTML Mostrar​

Plantilla:

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

<<[mainContent] -html>>

Datos:

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

Insertar completo HTML Estructuras de tablas para presentaciones de datos complejos.

Ejemplo: HTML Mesa​

Datos:

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

Plantilla:

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

Documentos de contenido mixto​

Combine campos de combinación estándar con HTML Contenido para la generación flexible de documentos.

Ejemplo: Informe de formato mixto​

Plantilla:

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 Buenas prácticas de formato​

HTML Directrices de contenido​

  1. Válido HTML - Utilice palabras bien formadas y válidas. HTML margen
  2. Estilos en línea - Preferir en línea CSS estilos sobre hojas de estilo externas
  3. Estructuras simples - Mantener HTML estructuras razonablemente simples
  4. Renderizado de prueba - Prueba cuán diferentes HTML se muestra en los documentos de salida
  5. Personajes especiales de escape - Escapar correctamente las comillas y los caracteres especiales en HTML

Recomendaciones de estilo​

  1. Formato básico - Cíñete a lo básico HTML etiquetas de formato
  2. Evite lo complejo CSS - Complejo CSS Puede que no se muestre como se espera
  3. Compatibilidad de fuentes - Utilice familias de fuentes ampliamente disponibles.
  4. Códigos de color - Utilice códigos de color hexadecimales (#RRGGBB) para mayor coherencia.
  5. Unidades de tamaño - Utilice pt (puntos) para los tamaños de fuente.

Consideraciones de seguridad​

Al aceptar HTML de fuentes externas:

  1. Desinfectar la entrada - Limpiar posibles amenazas HTML
  2. Validar la estructura - Verificar HTML está bien formado
  3. Etiquetas límite - Considere restringir los permitidos HTML etiquetas
  4. Evitar la entrada del usuario - Evitar correctamente el contenido generado por el usuario.
  5. Salida de prueba - Revisar los documentos generados en busca de contenido inesperado.

HTML vs. Formato de plantilla​

Cuándo usar HTML Inserción​

Usar HTML cuando:

  • El contenido proviene de WYSIWYG editores
  • Se requiere un formato complejo.
  • El contenido incluye tablas, listas y formatos mixtos.
  • Conservación de texto enriquecido de fuentes externas

Utilice el formato de plantilla cuando:

  • Un formato de texto simple es suficiente.
  • Trabajar con datos estructurados
  • Máximo control sobre el formato de salida
  • El rendimiento es fundamental

Limitaciones y consideraciones​

Limitaciones de renderizado​

  1. CSS apoyo - Limitado CSS Soporte; los estilos en línea funcionan mejor
  2. Diseños complejos - Muy complejo HTML Puede que no se muestre perfectamente
  3. JavaScript - JavaScript en HTML no se ejecuta
  4. Recursos externos - Externo CSSEs posible que las imágenes no se carguen.
  5. Características específicas del navegador - Avanzado HTML5 Es posible que algunas funciones no sean compatibles.

Actuación​

  1. Tiempo de procesamiento - HTML El análisis sintáctico añade sobrecarga de procesamiento.
  2. Gran contenido - Muy grande HTML Las cuerdas pueden afectar el rendimiento
  3. Múltiples instancias - Muchos HTML Las inserciones pueden ralentizar la generación.

Ejemplo completo: Plantilla de boletín informativo​

Plantilla:

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

<<[headerHtml] -html>>

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

<<[footerHtml] -html>>

Datos:

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

:::consejo HTML Pruebas Siempre realiza pruebas HTML inserción con datos de muestra para verificar que la representación aparezca como se espera. Diferentes formatos de documento (Word, PDF) puede generar HTML ligeramente diferente.

:::

:::advertencia HTML Complejidad Mantener HTML Contenido razonablemente simple para obtener mejores resultados. Muy complejo. HTML estructuras con avanzado CSS Es posible que no se visualice perfectamente en todos los formatos de salida.

:::