Pular para o conteúdo principal
API PDF4meIntegraçõesBase de conhecimentoExtensõesTestador de APIBlog

Inserir HTML - Guia de Conteúdo Avançado

PDF4meO mecanismo de geração de documentos do [nome da empresa] suporta suporte direto. HTML Inserção em modelos do Word, permitindo adicionar conteúdo ricamente formatado, estilos de texto complexos e estruturados. HTML conteúdo dinamicamente. Essa funcionalidade é particularmente útil quando sua fonte de dados contém dados pré-formatados. HTML contente.

HTML Sintaxe de Inserção​

Inserir HTML conteúdo usando o -html Alternar com seu campo de mesclagem:

<<[token] -html>>

O -html A opção instrui o mecanismo de modelos a analisar o valor do campo como HTML e renderizá-lo com a formatação apropriada no documento gerado.

Básico HTML Inserção​

Texto formatado simples​

Fonte de dados:

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

Sintaxe do modelo:

<<[apicalls] -html>>

Resultado gerado: O texto aparecerá com "PDF4me's API Chamadas ou chamadas automatizadas" em audacioso, seguido do restante do texto em formatação normal.

Apoiado HTML Elementos​

PDF4me's HTML A renderização suporta recursos comuns. HTML tags de formatação:

Etiquetas de formatação de texto​

Texto em negrito:

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

Texto em itálico:

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

Sublinhado:

<u>Underlined text</u>

Riscado:

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

Elementos estruturais​

Parágrafos:

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

Quebras de linha:

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

Títulos:

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

Listas​

Listas não 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>

Estilização de texto​

Cor da fonte:

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

Tamanho da fonte:

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

Família da fonte:

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

Exemplos práticos​

Exemplo 1: Descrição formatada do produto​

Dados:

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

Modelo:

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

Exemplo 2: Termos e Condições​

Dados:

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

Modelo:

<<[terms] -html>>

Exemplo 3: Anúncio formatado​

Dados:

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

Modelo:

<<[announcement] -html>>

Combinando HTML com lógica de modelo​

Integrar HTML Inserção com laços foreach e instruções condicionais.

HTML Conteúdo em listas​

Modelo:

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

<</foreach>>

Dados:

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

Modelo:

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

<<[mainContent] -html>>

Dados:

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

Inserir completo HTML Estruturas de tabelas para apresentações de dados complexos.

Exemplo: HTML Mesa​

Dados:

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

Modelo:

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

Documentos com conteúdo misto​

Combine campos de mesclagem padrão com HTML Conteúdo para geração flexível de documentos.

Exemplo: Relatório de Formato Misto​

Modelo:

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 Melhores práticas de formatação​

HTML Diretrizes de Conteúdo​

  1. Válido HTML - Use frases bem formadas e válidas. HTML marcação
  2. Estilos embutidos - Prefira em linha CSS estilos sobre folhas de estilo externas
  3. Estruturas simples - Manter HTML estruturas razoavelmente simples
  4. Renderização de teste - Teste como são diferentes HTML renderiza em documentos de saída
  5. Escape caracteres especiais - Escapar corretamente as aspas e os caracteres especiais em HTML

Recomendações de estilo​

  1. Formatação básica - Mantenha-se no básico HTML tags de formatação
  2. Evite coisas complexas CSS - Complex CSS pode não ser exibido como esperado
  3. Compatibilidade de fontes - Utilize famílias de fontes amplamente disponíveis.
  4. Códigos de cores - Use códigos de cores hexadecimais (#RRGGBB) para manter a consistência.
  5. Unidades de tamanho - Use pt (pontos) para tamanhos de fonte

Considerações de segurança​

Ao aceitar HTML de fontes externas:

  1. Higienizar entrada - Limpar potenciais malwares HTML
  2. Validar estrutura - Verificar HTML está bem formado
  3. Limitar tags - Considere restringir o permitido HTML tags
  4. Escape user input - Escapar adequadamente do conteúdo gerado pelo usuário
  5. Saída de teste - Analisar documentos gerados em busca de conteúdo inesperado.

HTML vs. Formatação de Modelo​

Quando usar HTML Inserção​

Usar HTML quando:

  • O conteúdo provém de WYSIWYG editores
  • É necessário formatação complexa.
  • O conteúdo inclui tabelas, listas e formatação mista.
  • Preservando texto rico de fontes externas

Use a formatação de modelo quando:

  • Uma formatação de texto simples é suficiente.
  • Trabalhando com dados estruturados
  • Controle máximo sobre a formatação de saída
  • O desempenho é fundamental.

Limitações e Considerações​

Limitações de renderização​

  1. CSS apoiar - Limitado CSS Suporte; estilos embutidos funcionam melhor
  2. Layouts complexos - Muito complexo HTML pode não renderizar perfeitamente
  3. JavaScript - JavaScript em HTML não é executado
  4. Recursos externos - Externo CSS/imagens podem não carregar
  5. Recursos específicos do navegador - Avançado HTML5 Algumas funcionalidades podem não ser suportadas.

Desempenho​

  1. Tempo de processamento - HTML A análise sintática adiciona sobrecarga de processamento.
  2. Conteúdo extenso - Muito grande HTML As cordas podem afetar o desempenho.
  3. Instâncias múltiplas - Muitos HTML As inserções podem retardar a geração

Exemplo completo: Modelo de boletim informativo​

Modelo:

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

<<[headerHtml] -html>>

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

<<[footerHtml] -html>>

Dados:

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

:::dica HTML Testando Sempre teste HTML Inserção com dados de amostra para verificar se a renderização aparece conforme o esperado. Diferentes formatos de documento (Word, PDF) pode render HTML ligeiramente diferente. :::

:::aviso HTML Complexidade Manter HTML Conteúdo razoavelmente simples para melhores resultados. Muito complexo. HTML estruturas com tecnologia avançada CSS Pode não ser exibido perfeitamente em todos os formatos de saída. :::