Lewati ke konten utama
API PDF4meIntegrasiBasis PengetahuanEkstensiPenguji APIBlog

Menyisipkan HTML - Panduan Konten Kaya

PDF4meMesin pembuatan dokumennya mendukung secara langsung. HTML Penyisipan di dalam templat Word, memungkinkan Anda untuk menambahkan konten yang diformat dengan kaya, penataan teks yang kompleks, dan struktur. HTML konten secara dinamis. Kemampuan ini sangat berguna terutama ketika sumber data Anda berisi data yang sudah diformat sebelumnya. HTML isi.

HTML Sintaks Penyisipan​

Menyisipkan HTML konten menggunakan -html Beralihlah dengan kolom gabungan Anda:

<<[token] -html>>

Yang -html Perintah switch menginstruksikan mesin template untuk mengurai nilai field sebagai HTML dan menampilkannya dengan format yang sesuai dalam dokumen yang dihasilkan.

Dasar HTML Penyisipan​

Teks Berformat Sederhana​

Sumber Data:

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

Sintaks Templat:

<<[apicalls] -html>>

Output yang dihasilkan: Teks akan muncul dengan "PDF4me'S API Panggilan atau Panggilan Otomatisasi" dalam berani, diikuti oleh sisa teks dalam format biasa.

Didukung HTML Elemen​

PDF4me'S HTML rendering mendukung hal umum HTML tag pemformatan:

Tag Pemformatan Teks​

Teks Tebal:

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

Teks Miring:

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

Menggarisbawahi:

<u>Underlined text</u>

Garis coret:

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

Elemen Struktural​

Paragraf:

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

Pemisah Baris:

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

Judul:

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

Daftar​

Daftar Tak Berurutan:

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

Daftar Berurutan:

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

Penataan Teks​

Warna Huruf:

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

Ukuran Huruf:

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

Keluarga Huruf:

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

Contoh Praktis​

Contoh 1: Deskripsi Produk yang Diformat​

Data:

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

Templat:

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

Contoh 2: Syarat dan Ketentuan​

Data:

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

Templat:

<<[terms] -html>>

Contoh 3: Pengumuman yang Diformat​

Data:

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

Templat:

<<[announcement] -html>>

Menggabungkan HTML dengan Logika Template​

Mengintegrasikan HTML Penyisipan dengan perulangan foreach dan pernyataan kondisional.

HTML Konten dalam Daftar​

Templat:

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

<</foreach>>

Data:

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

Bersyarat HTML Menampilkan​

Templat:

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

<<[mainContent] -html>>

Data:

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

Masukkan lengkap HTML Struktur tabel untuk penyajian data yang kompleks.

Contoh: HTML Meja​

Data:

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

Templat:

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

Dokumen dengan Konten Campuran​

Gabungkan kolom penggabungan standar dengan HTML konten untuk pembuatan dokumen yang fleksibel.

Contoh: Laporan Format Campuran​

Templat:

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 Praktik Terbaik Pemformatan​

HTML Pedoman Konten​

  1. Sah HTML - Gunakan format yang baik dan valid HTML markup
  2. Gaya sebaris - Lebih suka inline CSS gaya di atas stylesheet eksternal
  3. Struktur sederhana - Menyimpan HTML struktur yang relatif sederhana
  4. Rendering uji - Uji bagaimana perbedaannya HTML ditampilkan dalam dokumen keluaran
  5. Melarikan diri dari karakter khusus - Berikan tanda kutip dan karakter khusus dengan benar pada HTML

Rekomendasi Penataan Gaya​

  1. Pemformatan dasar - Tetap berpegang pada hal-hal dasar HTML tag pemformatan
  2. Hindari hal-hal yang rumit CSS - Kompleks CSS mungkin tidak ditampilkan sesuai harapan
  3. Kompatibilitas font - Gunakan keluarga font yang tersedia secara luas
  4. Kode warna - Gunakan kode warna heksadesimal (#RRGGBB) untuk konsistensi.
  5. Satuan ukuran - Gunakan pt (poin) untuk ukuran font

Pertimbangan Keamanan​

Saat menerima HTML dari sumber eksternal:

  1. Bersihkan input - Bersihkan potensi bahaya HTML
  2. Validasi struktur - Verifikasi HTML terbentuk dengan baik
  3. Batasi tag - Pertimbangkan untuk membatasi yang diizinkan HTML tag
  4. Hindari input pengguna - Melakukan escape yang tepat pada konten yang dihasilkan pengguna
  5. Hasil pengujian - Periksa dokumen yang dihasilkan untuk konten yang tidak terduga

HTML vs. Pemformatan Templat​

Kapan Harus Digunakan HTML Penyisipan​

Menggunakan HTML Kapan:

  • Konten berasal dari WYSIWYG editor
  • Diperlukan format yang kompleks.
  • Konten mencakup tabel, daftar, dan format campuran.
  • Melestarikan teks kaya dari sumber eksternal

Gunakan Pemformatan Templat ketika:

  • Pemformatan teks sederhana sudah cukup.
  • Bekerja dengan data terstruktur
  • Kontrol maksimal atas format output
  • Kinerja sangatlah penting.

Keterbatasan dan Pertimbangan​

Keterbatasan Rendering​

  1. CSS mendukung - Terbatas CSS dukungan; gaya sebaris bekerja paling baik
  2. Tata letak yang kompleks - Sangat kompleks HTML mungkin tidak ditampilkan dengan sempurna
  3. JavaScript - JavaScript di dalam HTML tidak dieksekusi
  4. Sumber daya eksternal - Eksternal CSSGambar mungkin tidak dimuat
  5. Fitur khusus browser - Canggih HTML5 Fitur-fitur tersebut mungkin tidak didukung.

Pertunjukan​

  1. Waktu pengerjaan - HTML Penguraian menambahkan beban pemrosesan.
  2. Konten besar - Sangat besar HTML string dapat memengaruhi kinerja
  3. Beberapa contoh - Banyak HTML penyisipan dapat memperlambat generasi

Contoh Lengkap: Templat Buletin​

Templat:

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

<<[headerHtml] -html>>

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

<<[footerHtml] -html>>

Data:

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

Selalu lakukan pengujian HTML Penyisipan dengan data sampel untuk memverifikasi tampilan rendering sesuai harapan. Berbagai format dokumen (Word, PDF) dapat menyebabkan HTML sedikit berbeda.

:::peringatan HTML Kompleksitas Pertahankan HTML Konten harus cukup sederhana untuk hasil terbaik. Sangat kompleks. HTML struktur dengan tingkat lanjut CSS Mungkin tidak akan ditampilkan dengan sempurna di semua format output.

:::