入れる HTML - リッチコンテンツガイド

PDF4meのドキュメント生成エンジンは直接サポートしています HTML Word テンプレート内に挿入することで、リッチフォーマットされたコンテンツ、複雑なテキストスタイル、構造化されたテキストを追加できます。 HTML コンテンツを動的に生成します。この機能は、データソースに事前にフォーマットされたデータが含まれている場合に特に役立ちます。 HTML コンテンツ。

HTML 挿入構文

入れる HTML コンテンツを使用する -html 差し込みフィールドに切り替えてください。

<<[token] -html>>

の -html switch は、テンプレートエンジンにフィールド値を次のように解析するように指示します。 HTML そして、生成された文書内で適切な書式設定を施して表示します。

基本 HTML 挿入

シンプルな書式設定テキスト

データソース:

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

テンプレート構文:

<<[apicalls] -html>>

生成された出力: テキストは「」で表示されますPDF4meの API 「通話または自動化通話」 大胆な続いて、通常の書式で残りのテキストが続きます。

サポート対象 HTML 要素

PDF4meの HTML レンダリングは一般的なサポートをサポートしています HTML 書式設定タグ:

テキスト書式設定タグ

太字:

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

斜体テキスト:

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

下線：

<u>Underlined text</u>

取り消し線:

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

構造要素

段落:

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

改行:

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

見出し:

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

テキストのスタイル設定

フォントの色:

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

フォントサイズ:

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

フォントファミリー:

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

実例

例1：フォーマット済み製品説明

データ：

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

テンプレート：

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

例2：利用規約

データ：

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

テンプレート：

<<[terms] -html>>

例3：書式設定されたお知らせ

データ：

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

テンプレート：

<<[announcement] -html>>

組み合わせる HTML テンプレートロジックを使用

統合する HTML foreachループと条件文を用いた挿入。

HTML リスト内のコンテンツ

テンプレート：

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

<</foreach>>

データ：

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

条件付き HTML 画面

テンプレート：

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

<<[mainContent] -html>>

データ：

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

完全な挿入 HTML 複雑なデータ表示のための表構造。

例： HTML テーブル

データ：

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

テンプレート：

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

混合コンテンツ文書

標準の差し込みフィールドと HTML 柔軟な文書生成のためのコンテンツ。

例：混合フォーマットレポート

テンプレート：

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 書式設定のベストプラクティス

HTML コンテンツガイドライン

有効 HTML - 整形式で有効な HTML マークアップ
インラインスタイル - インラインを優先 CSS 外部スタイルシートに対するスタイル
シンプルな構造 - 保つ HTML 構造は比較的単純です
テストレンダリング - 違いをテストする HTML 出力ドキュメントにレンダリングされます
特殊文字を脱出 - 引用符と特殊文字を適切にエスケープします HTML

スタイリングのおすすめ

基本的な書式設定 基本に忠実に HTML 書式設定タグ
複雑なものを避ける CSS - 複雑な CSS 期待どおりにレンダリングされない可能性があります
フォントの互換性 - 広く利用可能なフォントファミリーを使用する
カラーコード 一貫性を保つため、16進数カラーコード（#RRGGBB）を使用してください。
サイズ単位 フォントサイズにはpt（ポイント）を使用してください。

セキュリティに関する考慮事項

受け入れる際 HTML 外部ソースから:

入力をサニタイズする - 潜在的に悪意のあるものをクリーンアップする HTML
構造を検証する - 確認する HTML 整っている
制限タグ - 許可されている範囲を制限することを検討してください HTML タグ
ユーザー入力をエスケープする - ユーザー生成コンテンツを適切にエスケープする
テスト出力 生成されたドキュメントに予期しない内容が含まれていないか確認する。

HTML テンプレートの書式設定との比較

使用時期 HTML 挿入

使用 HTML いつ：

コンテンツは以下から WYSIWYG 編集者
複雑な書式設定が必要です
コンテンツには、表、リスト、および様々な書式が含まれます。
外部ソースからのリッチテキストの保持

テンプレート書式設定を使用するタイミング：

シンプルなテキスト書式設定で十分です
構造化データの操作
出力フォーマットを最大限に制御
パフォーマンスは重要です

制限事項と考慮事項

レンダリングの制限

CSS サポート - 限定 CSS サポート; インラインスタイルが最適
複雑なレイアウト 非常に複雑 HTML 完全にはレンダリングされない可能性があります
JavaScript - JavaScript で HTML 実行されません
外部リソース - 外部の CSS画像が読み込まれない場合があります
ブラウザ固有の機能 - 高度な HTML5 機能がサポートされていない場合があります

パフォーマンス

処理時間 - HTML 解析処理は処理オーバーヘッドを増加させる
大容量コンテンツ - 非常に大きい HTML 弦がパフォーマンスに影響を与える可能性があります
複数のインスタンス - 多くの HTML 挿入によって生成が遅くなる可能性がある

完全な例：ニュースレターテンプレート

テンプレート：

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

<<[headerHtml] -html>>

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

<<[footerHtml] -html>>

データ：

{
  "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 テスト

常にテストを HTML サンプルデータを挿入してレンダリングが期待どおりに表示されることを確認します。さまざまなドキュメント形式 (Word、 PDF) レンダリングする HTML少し違った形で。

HTML 複雑性

維持 HTML 最良の結果を得るには、コンテンツは比較的シンプルにしてください。非常に複雑です。 HTML 高度な構造 CSSすべての出力形式で完全に表示されるとは限りません。

HTML 挿入構文​

基本 HTML 挿入​

シンプルな書式設定テキスト​

サポート対象 HTML 要素​

テキスト書式設定タグ​

構造要素​

リスト​

テキストのスタイル設定​

実例​

例1：フォーマット済み製品説明​

例2：利用規約​

例3：書式設定されたお知らせ​

組み合わせる HTML テンプレートロジックを使用​

HTML リスト内のコンテンツ​

条件付き HTML 画面​

HTML 表​

例： HTML テーブル​

混合コンテンツ文書​

例：混合フォーマットレポート​

HTML 書式設定のベストプラクティス​

HTML コンテンツガイドライン​

スタイリングのおすすめ​

セキュリティに関する考慮事項​

HTML テンプレートの書式設定との比較​

使用時期 HTML 挿入​

制限事項と考慮事項​

レンダリングの制限​

パフォーマンス​

完全な例：ニュースレターテンプレート​

HTML 挿入構文

基本 HTML 挿入

シンプルな書式設定テキスト

サポート対象 HTML 要素

テキスト書式設定タグ

構造要素

リスト

テキストのスタイル設定

実例

例1：フォーマット済み製品説明

例2：利用規約

例3：書式設定されたお知らせ

組み合わせる HTML テンプレートロジックを使用

HTML リスト内のコンテンツ

条件付き HTML 画面

HTML 表

例： HTML テーブル

混合コンテンツ文書

例：混合フォーマットレポート

HTML 書式設定のベストプラクティス

HTML コンテンツガイドライン

スタイリングのおすすめ

セキュリティに関する考慮事項

HTML テンプレートの書式設定との比較

使用時期 HTML 挿入

制限事項と考慮事項

レンダリングの制限

パフォーマンス

完全な例：ニュースレターテンプレート