syncfusion-javascript-pdf-viewer

Syncfusion TypeScript PdfViewer – UI サンプルジェネレーター

ユーザーのプロジェクト向けコードを生成する (デフォルト)

トリガーキーワード： 「how to」、「add pdfviewer」、「code sample」、「show me」、「example」、「snippet」、「integrate」、「component」、「create sample」、「typescript sample」。

目的： ユーザーが TypeScript EJ2 プロジェクトに直接組み込める、最小限でコピー＆ペースト可能な TypeScript（.ts）および HTML コードを生成します。

ワークフロー： ⚠️ 重要 — 機能サポートポリシー（厳格モード）：

基本ルール： 参照ファイルに明示的に記載されている API とプロパティのみを使用してコードを生成してください。これに反する行為はすべて違反です。

• コードを生成する前に必ず確認すること：

  1. 参照ファイルで API／プロパティ名を正確に検索する
  2. メソッドリファレンス、プロパティ、またはイベントの表に記載されていることを確認する
  3. いずれの参照ファイルにも記載されていない場合は、ただちに中止する
  4. いかなる状況でも、ドキュメントに記載されていない API を生成または提案しない

• 厳格な適用 — 例外なし：

  • カスタムプロパティは禁止 — 参照ファイルの表にあるプロパティのみを使用する
  • メソッドの捏造は禁止 — 参照ファイルの表にあるメソッドのみを使用する
  • 未定義の API を使った回避策は禁止
  • ドキュメントに記載されていない動作についての推測は禁止
  • 推測に基づく代替実装は禁止
  • サポートされているかのように装うことは禁止

• サポートされていない機能について必ず返す内容：

  • 要求されたシナリオ／機能／API がいずれの参照ファイルにも記載されていない場合、必ず次のように返してください：

    "この機能は、現在の Syncfusion TypeScript PDF Viewer 実装ではサポートされていません。"
    

  • 続けて、該当する参照ファイルに記載されたサポート対象を列挙する
  • 参照ファイルに明示的な記載がない限り、代替案を提案しない

• 参照ファイルの優先順位：

  • 各参照ファイルには、その対象分野に関する完全で信頼できるドキュメントが含まれています
  • 表（メソッドリファレンス、プロパティ、イベント）が唯一の信頼できる情報源です
  • 参照ファイル内のこれらの表以外の内容は、説明に限られます
  • 参照ファイルの表に記載された範囲を超えないでください

• 生成内容の監査：

  • コードを提示する前に、使用する API がすべて参照ファイルの表に記載されていることを確認する
  • 各 API の出典となる参照ファイルを明記する
  • 参照ファイルの表の項目を引用できない場合は、そのコードを削除する

• これは非常に重要な要件です。 違反すると、このスキルの完全性と信頼性が損なわれます。

ステップ 1 — アプリケーションの種類を判別する (必須 — 省略しないこと)

• file_search ツールと read_file ツールを使用して、ワークスペースのプロジェクトファイルを調べます：
  • package.json（@syncfusion/ej2-pdfviewer または @syncfusion/ej2 依存関係を確認）
  • tsconfig.json（TypeScript の構成）
  • webpack.config.js（EJ2 クイックスタートでは webpack を使用）
  • src/index.ts または src/app.ts（メインの TypeScript エントリーポイント）
  • src/index.html（HTML コンテナーファイル）
• 出力： 続行する前に、検出したアプリケーションの種類が TypeScript EJ2 webpack プロジェクト（React／Vue／Angular プロジェクトではない）であることを確認します。
• 重要： このスキルは、EJ2 の PdfViewer クラスを使用した バニラ TypeScript コードを生成します。React、Angular、または Vue のコンポーネントコードは生成しないでください。

ステップ 2 — 参照ファイルのみからコードを生成する（必須）

• 生成前に: ステップ 1 が完了していることを確認してください
• 要求された機能に関連する references/*.md ファイルを読みます
• すべての API、プロパティ、メソッドをこれらの表と照合します
• クラスベースのアプローチ（必須 — TypeScript EJ2 パターンのみ）：
  • @syncfusion/ej2-pdfviewer から PdfViewer と必要なモジュールクラスをインポートします
  • PdfViewer.Inject(...) を使って必要な機能モジュールを注入します
  • new PdfViewer({ ... }) または new PdfViewer() でインスタンスを作成し、プロパティを設定します
  • viewer.appendTo('#ElementId') を使って DOM にマウントします
  • JSX、TSX、React フック、コンポーネントベースの構文は絶対に使用しないでください
  • <PdfViewerComponent>、<Inject services={...}>、useState、useRef、useEffect は絶対に使用しないでください
• 必須： コードを生成する前に、参照ファイルが存在し、アクセス可能であることを確認してください
• 要求された機能に適した参照ファイルを読みます：
  • 関連する references/*.md ファイルで read_file ツールを使用します
  • ファイルに Methods/Properties/Events の表が含まれていることを確認します
  • 表が完全で読み取り可能であることを確認します
• 参照ファイルが見つからない、または読み取れない場合：
  • コード生成を停止します
  • 次のように回答します："この機能の参照ファイルは利用できません。すべての参照ファイルが references/ ディレクトリに存在することを確認してください。"
  • 不足している参照ファイル名を列挙します
• これはブロッカーとなるステップです： 参照ファイルを検証せずに先へ進むことはできません
• API／プロパティが参照ファイルの表に記載されていない場合は、使用しないでください
• 参照ファイルに明記されていない API、メソッド、プロパティ、クラス、名前空間を創作、推測、提案しないでください

---

参照ファイルのルーティングガイド

すべてのテンプレートと操作スニペットは references/*.md にあります。各ファイルには、サンプルを生成する際にエージェントが組み合わせる、特定のスニペットまたはテンプレートが含まれています。

フロー： 常に getting-started.md から始め、一致する機能をそのアンカーにマージします。キーワードが一致しない場合は、基本的なサンプルのみを返します。

コード生成前のチェックリスト

• 設定プロパティの数を確認します： 1～3 個ですか？ → コンストラクターに直接渡します | 4 個以上ですか？ → 型付き定数に切り出します
• 列挙型が関係しますか？ はい → 列挙型をインポートした型付き定数を使用する必要があります | いいえ → 直接渡すことができます
• ほかの場所でも再利用しますか？ はい → 定数を使用します | いいえ → 直接記述することを優先します
• 型安全性が必要ですか？ はい → モデル型をインポートします | いいえ → モデル型のインポートは省略します
• 列挙型が必要ですか？ はい → @syncfusion/ej2-pdfviewer から必要な列挙型をインポートします | いいえ → 列挙型のインポートは省略します
• パッケージ名は正しいですか？ 常に @syncfusion/ej2-pdfviewer からインポートします — @syncfusion/ej2-typescript-pdfviewer からは絶対にインポートしないでください

🎯 コア設定と構成

ファイル	用途	ユーザーから次の質問があった場合に参照
getting-started.md	最小限の PdfViewer のセットアップ：クイックスタートを複製し、パッケージをインストールし、CSS をインポートし、documentPath と resourceUrl を指定して PdfViewer インスタンスを作成し、HTML コンテナーに appendTo します。	「基本的なセットアップ」、「最小限の例」、「使い始める」、「PDF の読み込み方法」
general-properties.md	ビューアーのコアプロパティ（幅、高さ、ドキュメントパス、ロケール、resourceUrl、serviceUrl、AJAX 設定、スクロール設定、commandManager）を構成します。	「構成」、「サーバー設定」、「ロケール」、「ドキュメントパスの設定」、「幅と高さ」
enable-properties.md	特定の機能（ツールバー、注釈、フォーム、ナビゲーション、テキスト選択、ダウンロード、印刷）の有効／無効を切り替えます。	「ツールバーを無効にする」、「機能を非表示にする」、「有効／無効」、「読み取り専用モード」、「機能を制限する」

📐 ナビゲーションとページ管理

ファイル	目的	ユーザーが次の内容について質問した場合の参照先
page-navigation.md	ページ間を移動します（最初のページ、最後のページ、次のページ、前のページ）。特定のページ番号に移動します。	「ページナビゲーション」、「ページに移動」、「次のページ」、「前のページ」、「ページにジャンプ」
bookmark-navigation.md	ブックマークパネルの PDF ブックマーク／目次を使って移動します。重要：ブックマーク API メソッドには、pdfviewer インスタンスから直接アクセスします（例：pdfviewer.bookmark.openBookmarkPane()）。BookmarkView のインジェクションと enableBookmark: true の設定が必要です。	「ブックマーク」、「目次」、「目次ナビゲーション」、「アウトラインパネル」、「ブックマークを取得」、「ブックマークをプログラムで取得」、「getBookmarks」、「goToBookmark」、「ブックマーク API」、「ブックマークの一覧表示」、「ブックマークを開く」、「ブックマークを閉じる」
hyperlink-navigation.md	PDF のハイパーリンクナビゲーション動作と外部リンクの処理を設定します。	「ハイパーリンク」、「外部リンク」、「URL ナビゲーション」、「クリック可能なリンク」、「url」、「リンク」
thumbnail-navigation.md	サムネイルパネルにページのサムネイルを表示し、それを使って移動します。	「サムネイル」、「ページのプレビュー」、「サムネイルパネル」、「ページプレビュー」

� コメントとパネル

ファイル	目的	ユーザーが次の内容について質問した場合の参照先
general-properties.md	isCommandPanelOpen を含むビューアーの基本プロパティを設定し、コメントパネルをプログラムで表示／非表示にします。「コマンドパネル（コメントパネル）の制御」セクションを参照してください。**要件：**コマンドパネルを機能させるには、enableAnnotation: true を設定します。プロパティ：isCommandPanelOpen は読み書き可能なブール値です（読み取り専用ではありません）。	「コメントパネルを表示」、「コメントパネルを非表示」、「コメントを切り替え」、「コマンドパネル」、「コメントを表示／非表示」、「isCommandPanelOpen」、「コメントパネル」、「注釈コメント」

�🔍 表示と操作

ファイル	目的	ユーザーが次の内容について質問した場合の参照先
magnification.md	ズームレベル、ズームモード、拡大縮小コントロール（ページに合わせる、幅に合わせる）を設定します。	「ズーム」、「拡大縮小」、「ページに合わせる」、「ズームレベル」、「ドキュメントを拡大縮小」
interaction-mode.md	選択モード（テキスト選択）とパンモード（タッチスクロール）を切り替えます。	「テキスト選択」、「パン」、「スクロールモード」、「操作モード」、「タッチナビゲーション」
text-selection.md	テキスト選択、テキストのコピー、テキスト選択イベントを有効にします。	「テキストを選択」、「テキストをコピー」、「コピーするテキストをハイライト」、「テキスト選択モード」
text-search.md	検索オプションとナビゲーションを備えたテキスト検索機能を実装します。	「テキストを検索」、「PDF 内を検索」、「検索機能」、「検索結果をハイライト」

🛠️ ツールバーとコンテキストメニュー

ツールバーの設定

ファイル	目的	ユーザーが次の内容について質問した場合の参照先
toolbar-settings.md	toolbarSettings を使って、ツールバーの表示、ツールチップの動作、およびツールバー項目のカスタマイズ／削除を設定します。	「ツールバーをカスタマイズ」、「ツールバー項目を非表示」、「ツールバーボタンを削除」、「ツールバーの設定」
toolbar-methods.md	showToolbar() などのメソッドを使って、ツールバーをプログラムで表示／非表示にし、実行時にツールバー項目を有効／無効にします。	「ツールバーを動的に表示／非表示」、「ツールバーを切り替え」、「ツールバー項目をプログラムで有効／無効化」

⚠️ ツールバー項目名の厳密な検証

ツールバー設定を生成する際は、誤ったツールバー項目名を防ぐため、必ず以下のルールに従ってください。

1. toolbar-settings.md に記載された正確な項目名を必ず参照してください

   • ツールバー項目名を作ったり、推測したり、決めつけたりしないでください
   • 命名パターンから項目名を導き出さないでください
   • toolbar-settings.md の「利用可能なメインツールバー項目」、「利用可能な注釈ツールバー項目」、「利用可能なフォームデザイナー項目」のセクションに記載された名前のみを使用してください

2. 項目名を1文字ずつ検証してください

   • 大文字と小文字の区別が重要です：HighlightTool ≠ HighlightOption
   • 正確な名前のみを使用してください：AnnotationEditTool ≠ AnotatetionEditTool
   • 省略形や短縮形は使用しないでください

3. ツールバー設定コードを生成する前に：

   • 参照ファイル toolbar-settings.md を開く
   • 「利用可能なメインツールバー項目」セクションを確認する
   • 「利用可能な注釈ツールバー項目」セクションを確認する
   • 「利用可能なフォームデザイナー項目」セクションを確認する
   • これらのセクションに記載された名前のみを正確にコピーする
   • すべての項目名を1文字ずつ照合する
   • 参照セクションにない項目名は、いかなる場合も使用しない
   • 判断に迷った場合は、toolbar-settings.md の「❌ 避けるべきよくある間違い」表を確認する

4. 防ぐべきよくある間違い：

   • ❌ AnotatetionEditTool → ✅ AnnotationEditTool（スペルミス）
   • ❌ CalibrationOption → ✅ CalibrateTool（接尾辞が誤り）
   • ❌ ShapeAnnotationOption → ✅ ShapeTool（注釈ツールバーのバージョン）
   • ❌ InkAnnotationOption → ✅ InkAnnotationTool（注釈ツールバーのバージョン）
   • 避けるべき間違いの完全な一覧は、toolbar-settings.md の「❌ 避けるべきよくある間違い」表を参照してください

コンテキストメニューのカスタマイズ

ファイル	目的	ユーザーから次の質問があった場合の参照先
context-menu.md	コンテキストメニュー項目をカスタマイズし、コンテキストメニューイベントを処理します。	「右クリックメニュー」、「コンテキストメニュー」、「カスタムコンテキストメニュー」、「コンテキストメニュー項目を無効にする」

📝 注釈

ファイル	目的	ユーザーから次の質問があった場合の参照先
annotation-settings.md	すべての種類の注釈について、外観（色、不透明度、スタイル）と動作を設定します。	「注釈の色」、「注釈のスタイル」、「注釈の外観をカスタマイズ」、「注釈の既定値」
annotation-events.md	注釈のライフサイクルイベント（追加、削除、移動、サイズ変更、選択、プロパティ変更）を処理します。	「注釈イベント」、「注釈が追加されたとき」、「注釈の変更検出」、「注釈コールバック」
shape-label-settings.md	図形注釈と計測注釈のラベル（位置、色、フォント、表示設定）をカスタマイズします。	「注釈ラベル」、「図形ラベル」、「計測ラベル」、「ラベルのカスタマイズ」
redaction-annotation.md	機密コンテンツを完全に削除するための墨消し注釈を作成、設定、適用します。	「墨消し」、「コンテンツを墨消しする」、「機密データを削除する」、「テキストを黒塗りする」、「完全な削除」

📄 フォーム

ファイル	目的	ユーザーから次の質問があった場合に参照
form-field-settings.md	フォームフィールド（テキスト、チェックボックス、ラジオボタン、ドロップダウン、署名）のデフォルトプロパティを設定します。適切な型キャストには、TextFieldSettings、CheckBoxFieldSettings、RadioButtonFieldSettings などを使用します。重要： フォームフィールドの境界には、大文字で始まるプロパティ（X、Y、Width、Height）を使用します。小文字ではありません。タイミングに関する重要事項： フォームフィールドは必ず documentLoad イベントのコールバック内で追加してください。ドキュメントの読み込み前に呼び出すと、「formFieldCollections is not a function」エラーが発生します。	「フォームフィールドのデフォルト」、「フォームフィールドのスタイル」、「フォームフィールドの設定」、「フォームフィールドのプロパティ」、「テキストフィールドの追加」、「フォームフィールドの追加」、「テキストボックスの追加」、「チェックボックスの追加」、「フィールドのプログラムによる追加」、「addFormField」、「TextFieldSettings」
form-field-events.md	フォームフィールドの操作イベント（フォーカス、フォーカス解除、値の変更、検証）を処理します。	「フォームフィールドのイベント」、「フィールド変更時」、「フォーム検証イベント」、「フィールド操作のコールバック」

📋 ドキュメント操作

ファイル	目的	ユーザーから次の質問があった場合に参照
download.md	カスタムファイル名を指定して、PDF のダウンロード機能を有効化または設定します。	「PDF のダウンロード」、「PDF の保存」、「ドキュメントのエクスポート」、「ダウンロードボタン」
print.md	PDF の印刷機能を設定して実行します。	「PDF の印刷」、「ドキュメントの印刷」、「印刷オプション」、「印刷ボタン」
organize-pages.md	PDF ページの並べ替え、回転、挿入、削除、コピー、インポート、抽出を行います。	「ページの並べ替え」、「ページの回転」、「空白ページの追加」、「ページの削除」、「ページの再配置」、「PDF の結合」

⚙️ 高度な機能

ファイル	目的	ユーザーから次の質問があった場合に参照
api-methods.md	プログラムによる制御：ドキュメントの読み込み、フォームや注釈の管理、テキストの抽出、元に戻す／やり直し、ナビゲーション API。	「PDF のプログラムによる読み込み」、「API メソッド」、「フォームデータのエクスポート」、「テキストの抽出」、「元に戻す／やり直し」、「プログラムによる制御」
events.md	PdfViewer のすべてのイベント（ドキュメントの読み込み、ダウンロード、注釈、フォーム、検索、ナビゲーション）の完全な一覧です。	「イベント一覧」、「すべてのイベント」、「利用可能なイベント」、「イベントリファレンス」、「イベントハンドラー」

---

クイックスタートの例

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
         ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

🔄 ドキュメントのライフサイクル要件（重要）

documentLoad イベントを使用するタイミング

一部の操作は、インスタンス化の直後ではなく、documentLoad イベントのコールバック内で実行する必要があります。

documentLoad が必要な操作：

• ✅ フォームフィールドのプログラムによる追加（formDesigner.addFormField()）
• ✅ 注釈の追加（annotation.addAnnotation()）
• ✅ フォームフィールドコレクションへのアクセス（formFieldCollections）
• ✅ ドキュメントメタデータへのアクセス
• ✅ ドキュメントに依存するプロパティの変更

インスタンス化時に安全に実行できる操作：

• ✅ enableToolbar、enableAnnotation などの設定
• ✅ width、height などのビューワープロパティの設定
• ✅ 設定オブジェクトの構成

例：フォームフィールドを追加する正しいタイミング

❌ 誤り —「formFieldCollections.findIndex is not a function」が発生します：

let pdfviewer = new PdfViewer({
  documentPath: 'https://...',
  resourceUrl: 'https://...'
});
pdfviewer.appendTo('#PdfViewer');

// ERROR! formFieldCollections not yet initialized
pdfviewer.formDesigner.addFormField('Textbox', { ... });

✅ 正しい — documentLoad コールバック内：

let pdfviewer = new PdfViewer({
  documentPath: 'https://...',
  resourceUrl: 'https://...',
  documentLoad: () => {
    // SAFE - Document fully loaded, formFieldCollections initialized
    pdfviewer.formDesigner.addFormField('Textbox', { ... });
  }
});
pdfviewer.appendTo('#PdfViewer');

---

⚙️ 設定のベストプラクティス

設定（toolbarSettings、annotationSettings、annotationSelectorSettings、arrowSettings、rectangleSettings など）を使用したコードを生成する場合は、次のガイドラインに従ってください：

ルール 1：シンプルな設定 → PdfViewer コンストラクターに直接渡す

次の場合にこの方法を使用します：

• 設定するプロパティが 1～3 個のみの場合
• 複雑な enum やカスタム型を使わない、単純な設定の場合

例（この方法を使用）：

import { PdfViewer, Toolbar, Annotation } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Annotation);

let pdfviewer: PdfViewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  annotationSelectorSettings: {
    selectionBorderColor: '#0000ff',
    resizerBorderColor: '#ff0000',
    resizerSize: 8
  }
});
pdfviewer.appendTo('#PdfViewer');

利点：

• ✅ 追加のインポートが不要
• ✅ シンプルで読みやすい
• ✅ コードがすっきりする
• ✅ 型チェックも引き続き機能する

---

ルール 2：複雑な設定 → 型付き定数として定義する（インスタンス化の外で）

次の場合にこの方法を使用します：

• 4 つ以上のプロパティ、または複数の関連設定を構成する場合
• 列挙型や複雑な設定を使用する場合
• 同じ設定を複数の場所で再利用する必要がある場合
• 設定が複雑で、個別に定義するのが適切な場合

例（複雑なケースにのみ使用してください）：

import { PdfViewer, Toolbar, Annotation, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-pdfviewer';
import { AnnotationSelectorSettingsModel } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Annotation);

// Define constant OUTSIDE instantiation with proper types and enums
const annotationSelectorConfig: AnnotationSelectorSettingsModel = {
  selectionBorderColor: '#0000ff',
  selectionBorderThickness: 2,
  resizerBorderColor: '#ff0000',
  resizerFillColor: '#4070ff',
  resizerSize: 8,
  resizerShape: 'Square',
  selectorLineDashArray: [5, 6],
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab
};

let pdfviewer: PdfViewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  annotationSelectorSettings: annotationSelectorConfig
});
pdfviewer.appendTo('#PdfViewer');

型と列挙型をインポートするタイミング：

• TypeScript の型チェック用にモデル型（例：AnnotationSelectorSettingsModel）をインポートします
• 設定で使用する列挙型（例：AnnotationResizerLocation、CursorType）をインポートします
• インポートは最小限にし、使用するもののみをインポートします

メリット：

• ✅ 型安全な設定
• ✅ 適切な列挙型の使用
• ✅ 複数のビューアーインスタンスで再利用可能
• ✅ すっきりとしたインスタンス化コード

---

ルール 3：単純なケースを過剰に設計しない

❌ 次のようにしないでください（過剰な設計）：

import { PdfViewer, Toolbar } from '@syncfusion/ej2-pdfviewer';
import { ToolbarSettingsModel } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar);

// Unnecessary constant for 2 simple properties
const toolbarSettings: ToolbarSettingsModel = {
  showTooltip: true
};

let pdfviewer: PdfViewer = new PdfViewer({
  toolbarSettings: toolbarSettings
});
pdfviewer.appendTo('#PdfViewer');

✅ 代わりに次のようにしてください（シンプルですっきり）：

import { PdfViewer, Toolbar } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar);

let pdfviewer: PdfViewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  toolbarSettings: { showTooltip: true }
});
pdfviewer.appendTo('#PdfViewer');

よくある落とし穴と修正方法

• ページ抽出 API の場所：extractPages() は pageOrganizer ではなく、PdfViewer のメソッドです。pdfviewer.pageOrganizer.extractPages('1-3') ではなく、pdfviewer.extractPages('1-3') を呼び出してください。PageOrganizer サービスは UI と機能を有効にしますが、プログラムからの抽出にはビューアーインスタンスを使用します。

• 抽出またはシリアライズした PDF の読み込み：pdfviewer.load(document, password?) は 2 つのパラメーターを受け取ります。extractPages(...) が返した出力を読み込むとき、ドキュメントが保護されていない場合は、例のようにパスワードパラメーターに空文字列を指定してください：pdfviewer.load(extractedPdf, '')。実際のパスワードを指定するのは、パスワードで保護された PDF の場合のみです。

• ドキュメントに依存する操作のイベントタイミング：初期化エラー（例：formFieldCollections が使用可能になる前のエラー）を避けるため、注釈とフォームフィールドの操作は documentLoad 内で実行してください。

---