Adobe PDF Embed API – WebサイトでPDFを埋め込んで表示できるJavaScriptライブラリ

Adobe PDF Embed APIは、WebサイトにPDFファイルを埋め込んで表示・操作できるAdobe提供のJavaScriptライブラリです。

実例：
https://www.lmigroupintl.com/project-highlights/elimar-returns
https://www.lmigroupintl.com/pdf/elimar-report

以下のような特徴があります：

⸻

✅ 主な特徴
• インタラクティブ表示：PDFをページ内にきれいに表示し、拡大・検索・スクロールなどが可能。
• レスポンシブ対応：モバイルでもスムーズに閲覧可能。
• 表示モードの切り替え：フルページ表示、インライン表示、ライトボックス表示などに対応。
• 注釈機能の追加（有料機能）
• セキュリティ設定：ダウンロード不可、印刷不可などの設定も可能。

⸻

🛠️ 導入方法（基本）
1. Adobe Developer ConsoleでAPIキーを取得
• https://developer.adobe.com/document-services/
• 無料プランでEmbed APIが使える
2. HTMLにスクリプトを追加

<script src=”https://documentcloud.adobe.com/view-sdk/main.js”></script>

3. PDFを表示するJavaScriptコード

<div id=”adobe-dc-view”></div>

<script type=”text/javascript”>
  document.addEventListener(“adobe_dc_view_sdk.ready”, function () {
    var adobeDCView = new AdobeDC.View({
      clientId: “あなたのClient ID”,
      divId: “adobe-dc-view”
    });
    adobeDCView.previewFile({
      content: {
        location: {
          url: “https://example.com/sample.pdf”
        }
      },
      metaData: {
        fileName: “sample.pdf”
      }
    }, {
      embedMode: “SIZED_CONTAINER” // 他に “FULL_WINDOW”, “IN_LINE”, “LIGHT_BOX” など
    });
  });
</script>

⸻

📦 表示モード一覧（embedMode）

モード名 説明
FULL_WINDOW ブラウザ全体で表示（SPAに最適）
SIZED_CONTAINER 指定サイズのdiv内で表示
IN_LINE その場で表示、ページの流れに自然に溶け込む
LIGHT_BOX モーダルとして表示（ポップアップ的）

⸻

💡Tips
• clientId は AdobeのDeveloper Console から発行します。
• PDFファイルはCORS対応された HTTPSホスティングが必要です。
• ダウンロード・印刷の制御は「PDF Embed API」用の設定で制御できます。

⸻