Ana içeriğe geç
PDF4me APIEntegrasyonlarBilgi BankasıUzantılarAPI Test CihazıBlog

Sokmak HTML - Zengin İçerik Rehberi

PDF4meBelge oluşturma motoru doğrudan desteği sağlar. HTML Word şablonlarına ekleme özelliği sayesinde, zengin biçimlendirilmiş içerik, karmaşık metin stilleri ve yapılandırılmış metinler ekleyebilirsiniz. HTML İçeriği dinamik olarak değiştirme özelliği, özellikle veri kaynağınız önceden biçimlendirilmiş içerik içeriyorsa kullanışlıdır. HTML içerik.

HTML Ekleme Sözdizimi​

Sokmak HTML içerik kullanımı -html Birleştirme alanınızla değiştirin:

<<[token] -html>>

O -html switch ifadesi, şablon motoruna alan değerini şu şekilde ayrıştırması talimatını verir: HTML ve oluşturulan belgede uygun biçimlendirmeyle gösterin.

Temel HTML Ekleme​

Basit Biçimlendirilmiş Metin​

Veri Kaynağı:

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

Şablon Sözdizimi:

<<[apicalls] -html>>

Oluşturulan Çıktı: Metin " ile birlikte görünecektir.PDF4me'S API "Çağrılar veya Otomasyon çağrıları" gözü pekArdından metnin geri kalanı normal formatta gelir.

Desteklendi HTML Elementler​

PDF4me'S HTML oluşturma ortak destekler HTML Biçimlendirme etiketleri:

Metin Biçimlendirme Etiketleri​

Kalın Yazı:

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

İtalik Metin:

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

Altını çiz:

<u>Underlined text</u>

Üstü çizili:

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

Yapısal Elemanlar​

Paragraflar:

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

Satır Sonları:

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

Başlıklar:

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

Listeler​

Sıralı Olmayan Listeler:

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

Sıralı Listeler:

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

Metin Biçimlendirme​

Yazı Rengi:

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

Yazı Tipi Boyutu:

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

Yazı Tipi Ailesi:

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

Pratik Örnekler​

Örnek 1: Biçimlendirilmiş Ürün Açıklaması​

Veri:

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

Şablon:

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

Örnek 2: Şartlar ve Koşullar​

Veri:

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

Şablon:

<<[terms] -html>>

Örnek 3: Biçimlendirilmiş Duyuru​

Veri:

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

Şablon:

<<[announcement] -html>>

Birleştirme HTML Şablon Mantığı ile​

Entegre et HTML foreach döngüleri ve koşullu ifadeler kullanarak ekleme.

HTML Listelerdeki İçerik​

Şablon:

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

<</foreach>>

Veri:

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

Şartlı HTML Görüntülemek​

Şablon:

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

<<[mainContent] -html>>

Veri:

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

Tamamını ekle HTML Karmaşık veri sunumları için tablo yapıları.

Örnek: HTML Masa​

Veri:

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

Şablon:

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

Karma İçerikli Belgeler​

Standart birleştirme alanlarını aşağıdakilerle birleştirin HTML Esnek belge oluşturma için içerik.

Örnek: Karma Formatlı Rapor​

Şablon:

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 Biçimlendirme En İyi Uygulamaları​

HTML İçerik Yönergeleri​

  1. Geçerli HTML - Düzgün biçimlendirilmiş, geçerli ifadeler kullanın. HTML işaretleme
  2. Satır içi stiller - Satır içi tercih edilir CSS Harici stil sayfaları üzerindeki stiller
  3. Basit yapılar - Kale HTML yapılar oldukça basit
  4. Test oluşturma - Farklılıkları test edin HTML çıktı belgelerinde oluşturulur
  5. Özel karakterlerden kaçış - Tırnak işaretlerinden ve özel karakterlerden düzgün şekilde kaçın HTML

Stil Önerileri​

  1. Temel biçimlendirme - Temel bilgilere bağlı kalın HTML biçimlendirme etiketleri
  2. Karmaşıklıktan kaçının CSS - Karmaşık CSS Beklendiği gibi görüntülenmeyebilir.
  3. Yazı tipi uyumluluğu - Yaygın olarak kullanılan yazı tipi ailelerini kullanın.
  4. Renk kodları - Tutarlılık için onaltılık renk kodlarını (#RRGGBB) kullanın.
  5. Boyut birimleri - Yazı tipi boyutları için pt (punto) kullanın.

Güvenlik Hususları​

Kabul ederken HTML Harici kaynaklardan:

  1. Girişi temizle - Potansiyel olarak zararlı maddeleri temizleyin HTML
  2. Yapıyı doğrula - Doğrulamak HTML iyi biçimlendirilmiştir
  3. Sınır etiketleri - İzin verilenleri kısıtlamayı düşünün HTML etiketler
  4. Kullanıcı girdisinden kaçış - Kullanıcı tarafından oluşturulan içerikten düzgün şekilde kaçın
  5. Test çıktısı - Oluşturulan belgeleri beklenmedik içerik açısından inceleyin.

HTML Şablon Biçimlendirmeye karşı​

Ne zaman kullanılır? HTML Ekleme​

Kullanmak HTML Ne zaman:

  • İçerik şuradan geliyor: WYSIWYG editörler
  • Karmaşık biçimlendirme gereklidir.
  • İçerik tabloları, listeleri ve karma biçimlendirmeyi içerir.
  • Dış kaynaklardan gelen zengin metinleri koruma

Şablon Biçimlendirmesini şu durumlarda kullanın:

  • Basit metin biçimlendirmesi yeterlidir.
  • Yapılandırılmış verilerle çalışma
  • Çıktı biçimlendirmesi üzerinde maksimum kontrol
  • Performans kritik öneme sahiptir.

Sınırlamalar ve Hususlar​

Görüntüleme Sınırlamaları​

  1. CSS Destek - Sınırlı CSS destek; satır içi stiller en iyi sonucu verir
  2. Karmaşık düzenler - Çok karmaşık HTML mükemmel şekilde görüntülenmeyebilir.
  3. JavaScript - JavaScript içinde HTML yürütülmüyor
  4. Dış kaynaklar - Harici CSS/resimler yüklenmeyebilir
  5. Tarayıcıya özgü özellikler - Gelişmiş HTML5 Özellikler desteklenmeyebilir.

Performans​

  1. İşlem süresi - HTML Ayrıştırma, işlem yükünü artırır.
  2. Büyük içerik - Çok büyük HTML Teller performansı etkileyebilir.
  3. Birden fazla örnek - Birçok HTML Eklemeler üretimi yavaşlatabilir

Örnek Şablon: Haber Bülteni Şablonu​

Şablon:

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

<<[headerHtml] -html>>

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

<<[footerHtml] -html>>

Veri:

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

:::uç HTML Test Etme Her zaman test edin HTML Görüntülenmenin beklendiği gibi göründüğünü doğrulamak için örnek verilerle ekleme. Farklı belge formatları (Word, PDF) ortaya çıkarabilir HTML biraz farklı.

:::

:::uyarı HTML Karmaşıklık Tutun HTML En iyi sonuçlar için içerik makul derecede basit olmalıdır. Çok karmaşık. HTML gelişmiş yapılar CSS Tüm çıktı formatlarında mükemmel şekilde görüntülenmeyebilir.

:::