YouTube ChannelSchedule a CallSubscribe for Updates

PDF ビューアー

概要

Avonni PDF Viewer コンポーネントは、Salesforce Lightning ページ上のダイナミックコンポーネント内に PDF ドキュメントを直接埋め込み表示することを可能にします。これにより、ユーザーは請求書、契約書、レポート、ガイドなどの PDF コンテンツをファイルをダウンロードしたり別のアプリケーションを開いたりせずにシームレスに閲覧できます。

主な機能は次のとおりです：

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

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

  • 簡単な構成： 主に PDF ソースの定義を行うだけの最小限のセットアップで済みます。

インライン PDF 表示のために必要な Salesforce 設定

Salesforce の設定で、ファイルのアップロードおよびダウンロードのセキュリティに移動します。PDF のエントリを見つけ、その動作を「ブラウザで実行」に設定します。これによりコンポーネント内で PDF がレンダリングされます。「ダウンロード」に設定されている場合、Salesforce はファイルのダウンロードを強制し、ビューワーは空白になったりドキュメントを表示する代わりにダウンロードを開始したりします。

確認および更新方法：

  1. 設定 → クイック検索：「ファイルのアップロードおよびダウンロードのセキュリティ」

  2. 一覧を開き、「PDF」を探します

  3. 動作を「ブラウザで実行」に変更します

  4. 保存

  5. Lightning ページを更新してビューワーをテストします

ユースケース

  • Opportunity や Order レコード上で生成された請求書や見積りの PDF を表示する。

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

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

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

  • アップロードされた添付ファイルをカスタムコンポーネント内で直接表示する。

PDF ビューアの追加

ドラッグアンドドロップ： コンポーネントライブラリ（左パネル）から「PDF Viewer」コンポーネントを見つけ、コンポーネントビルダーのキャンバスにドラッグします。

構成

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

基本プロパティ

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

  • タイトル： （テキスト、任意）スタイルに応じてビューワーのフレームの上部や一部として表示されるタイトル。例：「請求書プレビュー」、「契約書ドキュメント」。

PDF ソース

  • ソース： （テキスト - 必須）この重要なプロパティは PDF ドキュメントの出所を示します。次のいずれかの形式でソースを提供する必要があります： 1 つ 次の形式のいずれか：

    • ContentDocumentId： Salesforce 組織内に保存されたファイル（ContentDocument レコード）の 15 桁または 18 桁の ID を提供します。これは 内部ドキュメントを安全に表示するためのもっとも一般的で推奨される方法です。 通常、このプロパティを ID を保持する変数やリソースにバインドします（例： {!FileIdVariable}, $Component.record.LatestInvoiceId__c).

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

    • Base64： PDFファイルの内容全体を表すBase64エンコードされた文字列を提供してください（ 全体 ）。この方法は一般的に 小さなPDF にのみ適しており、動的に生成されるか別のシステムから渡される場合に利用されます。大きなBase64文字列はパフォーマンスに大きな影響を与え、コンポーネントの構成サイズ制限に達する可能性があります。

コンポーネントの表示設定

PDFビューアコンポーネントをページに表示するかどうかを制御します。動的な表示制御のために、Boolean変数または数式にバインドしてください（ 動的な表示.

例

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

シナリオ： 現在の商談（Opportunity）レコードページに関連する最新の請求書PDFを表示する。

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

セットアップ概要

1

自動起動フローを作成する

PDFビューアコンポーネントはSalesforceファイルを表示するために ContentDocumentId を必要としますが、通常はレコードID（例：商談ID）しか利用できないため、正しいファイルを見つける方法が必要です。自動起動フローを使用すると次のことができます：

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

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

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

構成

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

  • 関連ファイルを ContentDocumentLink と ContentVersion オブジェクトを通じてクエリする

  • タイトルに「Invoice」を含むPDFファイルをフィルタリングする

  • 返すのは ContentDocumentId 最も最近の一致するファイルの

2

動的コンポーネント内で

フローがContentDocumentIdを取得する準備ができたら、動的コンポーネントを設定してこのフローを実行し、その結果をPDFビューアに渡す必要があります。これにはターゲットオブジェクトの設定、ファイルIDを格納する変数の作成、ページ読み込み時にフローをトリガーすること、およびその変数をPDFビューアのSourceプロパティにバインドすることが含まれます。

手順：

  • を設定する ターゲットオブジェクト名 を Opportunity に動的コンポーネント設定で設定します（これにより現在のレコードコンテキストにアクセスできます）

  • 作成する テキスト変数 （例： invoiceFileId）を作成してContentDocumentIdを格納する

  • を追加します フローを実行 アクションを 読み込み時 の操作：

    • 自動起動フローを選択します

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

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

  • PDFビューワーの設定 ソース プロパティを {!invoiceFileId}

に設定： ページが読み込まれると、フローは最新の請求書PDFのContentDocumentIdを取得し、PDFビューワーが自動的にそれを表示します。

外部URLからPDFを表示する

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

  1. PDFビューワーを追加： コンポーネントをキャンバスに追加します。

  2. ソースを設定：

    • PDFビューワーを選択します。

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

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

重要な注意点

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

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

  • ⚠️ Salesforceファイル処理設定: Salesforceのセットアップで、次に移動します 「ファイルのアップロードとダウンロードのセキュリティ」。次の動作を確認してください PDF ファイルが 「ブラウザで実行」に設定されていること。もし「ダウンロード」に設定されていると、このコンポーネントはPDFをインライン表示せず、ファイルのダウンロードを開始する可能性があります。

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

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

URL 表示の制限と回避策

PDF のソースとして直接 URL を使用する場合、次の点に注意してください： Salesforce のセキュリティ設定やブラウザのポリシー が原因で、PDF が PDF ビューア内で正しく表示されないことがあります。その場合、ユーザーは空白のフレームやエラーメッセージに遭遇することがあります。

回避策：Google ドキュメント ビューアを使用して埋め込む

これらの制限を回避するには、Google ドキュメント ビューア サービスを利用できます。これにより、元のファイルの直接埋め込みがブロックされている場合でも、iframe 内で PDF ファイルを表示できます。

使用方法：

PDF ビューアの Source プロパティを次のような Google ドキュメント ビューアのリンクに設定します（数式テキスト変数を使用して行うことができます）

https://docs.google.com/gview?embedded=true&url=[あなたの 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 ページのインターフェース内で直接表示するための簡単な方法を提供し、ユーザーが文脈情報にアクセスしやすくします。

最終更新

役に立ちましたか？