YouTube ChannelSchedule a CallSubscribe for Updates

PDF ビューアー

概要

Avonni PDF Viewer コンポーネントを使用すると、Salesforce Lightning ページ上の Dynamic Components 内に PDF ドキュメントを直接埋め込み、表示できます。これにより、ユーザーはファイルをダウンロードしたり別アプリに移動したりすることなく、請求書、契約書、レポート、ガイドなどの PDF コンテンツをシームレスに閲覧できます。

主な機能:

  • PDF の直接埋め込み: Lightning ページ上で PDF コンテンツを直接表示します。

  • 複数のソースオプション: Salesforce Files（ContentDocumentId を使用）、外部 URL、または Base64 エンコード済みデータから PDF を読み込みます。

  • シンプルな設定: 設定は最小限で、主に PDF のソース定義のみが必要です。

ユースケース

  • Opportunity や Order レコードに、生成された請求書または見積書の PDF を表示。

  • Account や Contact ページに、署名済みの契約書や合意書を表示。

  • Product レコードページに、製品マニュアルやデータシートを埋め込み。

  • ダッシュボードコンポーネント内で、PDF として生成されたレポートを提示。

  • カスタムコンポーネントのコンテキスト内で、アップロード済み添付ファイルを直接表示。

PDF Viewer の追加

ドラッグ＆ドロップ: Component Library（左ペイン）から「PDF Viewer」コンポーネントを見つけ、Component Builder のキャンバス上にドラッグします。

設定

キャンバス上の PDF Viewer コンポーネントを選択し、プロパティパネルでプロパティにアクセスします。

基本プロパティ

  • API 名: （テキスト）このコンポーネントインスタンスの一意の識別子（例: InvoiceViewer, ContractDisplay).

  • タイトル: （テキスト、省略可）ビューワーの枠の上部または一部として表示されるタイトル（スタイルに依存）。例:「Invoice Preview」「Contract Document」。

PDF ソース

  • ソース: （テキスト - 必須）この重要なプロパティは PDF ドキュメントの取得元を示します。ソースは次の形式の いずれか で指定する必要があります:

    • ContentDocumentId: Salesforce 組織内に保存されているファイル（ContentDocument レコード）の 15 文字または 18 文字の Salesforce ID を指定します。これは、 最も一般的で推奨される方法 であり、社内文書を安全に表示できます。通常、このプロパティは ID を保持する変数やリソースにバインドします（例: {!FileIdVariable}, $Component.record.LatestInvoiceId__c).

    • URL: オンラインにホストされた PDF ファイルを指す、直接アクセス可能な公開 HTTPS URL を指定します（例: https://example.com/document.pdf）。URL が正しいこと、およびユーザーがアクセス権を持つことを確認してください（ネットワーク制限や CORS の問題の可能性を考慮）。

    • Base64: PDF ファイルの 全体 の内容を表す Base64 エンコード文字列を指定します。この方法は一般的に、 小さな PDF にのみ適しており、動的に生成される場合や他システムから渡される場合に有効です。大きな Base64 文字列はパフォーマンスに大きく影響し、コンポーネント設定サイズの上限に達する可能性があります。

コンポーネントの表示制御

PDF Viewer コンポーネントをページに表示するかどうかを制御します。これを真偽値の変数または数式にバインドして 動的な表示.

例

Salesforce ファイル（ContentDocumentId を使用）の表示

シナリオ: 現在の Opportunity レコードページに関連する最新の請求書 PDF を表示します。

アプローチ: 「On Load」でトリガーされる自動起動フローを使用して ContentDocumentId を取得し、PDF Viewer に渡します。

セットアップ概要

1

自動起動フローを作成

PDF Viewer コンポーネントは ContentDocumentId を使用して Salesforce ファイルを表示しますが、通常はレコード ID（例: Opportunity ID）しか持っていないため、正しいファイルを見つける方法が必要です。自動起動フローにより、次のことが可能になります:

  • 現在のレコードに関連するファイルを見つけるために Salesforce データベースをクエリ

  • 表示したい特定の PDF（例: 最新の請求書）を見つけるためのフィルターを適用

  • をコンポーネント ContentDocumentId に返す

設定

  • レコード ID を入力として受け取る

  • を通じて関連ファイルをクエリ ContentDocumentLink および ContentVersion オブジェクト

  • タイトルに「Invoice」を含む PDF ファイルをフィルター

  • 最も新しい一致ファイルの ContentDocumentId を返す

2

Dynamic Component 内で

フローが ContentDocumentId を取得できるようになったら、Dynamic Component を構成してこのフローを実行し、その結果を PDF Viewer に渡す必要があります。これには、ターゲットオブジェクトの設定、ファイル ID を保持する変数の作成、ページ読み込み時のフロー実行のトリガー、その変数を PDF Viewer の Source プロパティにバインドすることが含まれます。

手順:

  • を設定 ターゲットオブジェクト名 を Opportunity に（現在のレコードコンテキストへのアクセスを有効化）

  • を作成 テキスト変数 （例: invoiceFileId）ContentDocumentId を保持

  • を追加 フローを実行 アクションを On Load インタラクションに追加:

    • 自動起動フローを選択

    • フローの 入力変数 を @recordId （現在の Opportunity ID をフローに渡します）

    • フローの 出力変数 を {!invoiceFileId} （返された ContentDocumentId を保持します）

  • PDF Viewer の Source プロパティを設定 {!invoiceFileId}

結果: ページ読み込み時に、フローが最新の請求書 PDF の ContentDocumentId を取得し、PDF Viewer が自動的に表示します。

外部 URL から PDF を表示

シナリオ: 一般公開されている製品データシートの PDF を埋め込みます。

  1. PDF Viewer を追加: コンポーネントをキャンバスに追加します。

  2. ソースの設定:

    • PDF Viewer を選択。

    • の Source プロパティに、PDF ファイルの完全な HTTPS URL を直接入力します（例: https://www.example-company.com/datasheets/product-xyz.pdf）。URL を保持するテキスト変数や定数リソースにバインドすることも可能です。

  3. タイトルの設定（任意）: を設定 タイトル プロパティ（例:「Product XYZ Datasheet」）。

重要な考慮事項

  • 権限（Salesforce Files）: を使用する場合は、 ContentDocumentIdページを閲覧するユーザーがその特定のファイルレコードへアクセスするための必要な Salesforce 権限を持っていることを確認してください。

  • URL の到達性: を使用する場合は、 URLが正しく、公開アクセス（またはユーザーのネットワーク内でアクセス可能）であること、そして埋め込みを妨げる可能性のあるクロスオリジンリソースシェアリング（CORS）制限を考慮してください。HTTPS を使用してください。

  • ⚠️ Salesforce のファイル処理設定: Salesforce セットアップで、 「File Upload and Download Security」に移動します。 PDF ファイルの動作が 「Execute in Browser」に設定されていることを確認します。「Download」に設定されている場合、このコンポーネントは PDF をインライン表示せず、ファイルのダウンロードを開始する可能性があります。

  • Base64 のパフォーマンス／制限: 大きな PDF に対しては、パフォーマンスへの影響やサイズ制限の可能性があるため、Base64 の使用は避けてください。 ContentDocumentId または URL が一般的に推奨されます。

  • ブラウザ互換性: PDF のレンダリングはブラウザの機能や内蔵 PDF ビューアに依存します。ユーザーの標準ブラウザとの互換性を確認してください。

URL 表示制限と回避策

PDF ソースとして直接 URL を使用する場合、 Salesforce のセキュリティ設定やブラウザのポリシー により、PDF が PDF Viewer 内で正しく表示されないことがあります。この場合、空白のフレームやエラーメッセージが表示されることがあります。

回避策: Google Docs Viewer を使用して埋め込む

これらの制限を回避するため、Google Docs Viewer サービスを活用できます。元のファイルの直接埋め込みがブロックされている場合でも、iframe 内に PDF を表示できます。

使い方:

PDF Viewer の Source プロパティを、以下の形式の Google Docs Viewer リンクに設定します（数式テキスト変数で実施可能）

https://docs.google.com/gview?embedded=true&url=[your PDF URL]

例:

https://docs.google.com/gview?embedded=true&url=https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf

⚠️ 重要

この回避策を許可するには、 https://docs.google.com を 信頼済み URL のリストに Salesforce セットアップで追加し、さらに docs.google.com が組織のセキュリティポリシー内で iframe 利用を許可されていることを確認してください。

まとめ

Avonni PDF Viewer コンポーネントは、さまざまなソースからの PDF ドキュメントをカスタム Lightning ページのインターフェース内で直接表示するためのわかりやすい手段を提供し、ユーザーの状況に応じた情報へのアクセスを向上させます。

最終更新

役に立ちましたか？