注釈エディタのツールバーで提供されるリンク注釈を使用してPDFドキュメントにリンクを追加することができます。リンクは、テキスト、画像、既存の注釈やフォームフィールドの上など、PDFドキュメントの任意の領域に追加できます。以下の画像は、リンク注釈ボタンを示します。

以下のGIFは、リンク注釈を使用してPDFドキュメントにリンクを追加する方法を示します。リンクされた領域にマウスをホーバーすると、リンクがツールチップとして表示されます。

選択されたテキストにリンクを追加するには、次のようにコンテキストメニューの[リンクを追加]オプションも使用できます。

プロパティパネルの[新規ウィンドウ]オプションがtrueに設定されていない限り、すべての外部リンクは同じブラウザウィンドウで開かれます。

リンク注釈の種類

PDFビューワでは、プロパティパネルの[種類]ドロップダウンから選択して次の種類のリンクをPDFドキュメントに追加できます。

URL: Webページ、電子メールアドレス、またはURLが指定できるものへのハイパーリンクを作成します。以下の画像は、「Wetlands」を検索するリンクをURLとして追加する方法を示します。

以下の画像は、メールを開くURLを追加する方法を示します。

移動先: リンクするPDFドキュメント内の明示的な移動先を指定します。PDFドキュメントの任意の領域やページを指定することができ、ページに合わせる、コンテンツの拡大、垂直／水平座標の特定の位置への移動など様々なオプションがあります。「移動先の表示方法」では、 PDF仕様1.7のセクション12.3.2.2に記載されている、明示的な移動先に設定できる8つのオプションすべてを提供します。

以下の画像は、PDFドキュメントの3番目のページを開くリンクを指定する方法を示します。

アクション: 最初のページ、最後のページ、次のページ、前のページ、前の画面、次の画面など、ナビゲーション操作を指定します。以下の画像は、次のページに移動するアクションを行うリンクを指定する方法を示します。

[前の画面]および[次の画面]アクションを使用すると、ブラウザの[元に戻る]および[次に進む]アクションと同様に、PDFドキュメントの表示履歴をナビゲートできます。PDFビューワは、ドキュメント履歴をナビゲートするための以下のメソッドを提供します。

// Move back in the document history
viewer.goBack();
// Move forward in the document history
viewer.goForward();

次の画像は、リンク注釈を使用して、[最初へ移動]、[前の画面]、[次の画面]、および[最後へ移動]アクションを示しています。

PDFビューワは、ブラウザのHistory APIを使用して、PDFドキュメント内に移動するときに変更された位置を記憶します。標準のWebブラウザのHistoryAPIを使用することもできます。 詳細については、こちらを参照します。

JavaScript アクション: ドキュメント内の様々なインタラクティブなフォームフィールドが値を更新したり、外観を変更したりするなど、スクリプトに応じて実行されるJavaScript アクションを指定します。以下の画像は、PDFドキュメントを印刷するスクリプトを指定する方法を示します。

コードでリンク注釈の作成

次のサンプルコードは、PDFドキュメントにURLをリンクとして追加する方法を示します。

// リンク注釈を追加します
var linkAnnotation = { annotationType: 2, linkType: 'url', url: 'http://google.com', rect: [0, 0, 200, 40] };
viewer.addAnnotation(0, linkAnnotation);
var viewer = new DsPdfViewer('#root', { externalLinkTarget: 'blank' });

externalLinkTargetオプションは、リンクされたドキュメントを開く場所を指定します。可能な値は次のとおりです。 

• blank: リンクされたドキュメントを新規ウィンドウやタブで開きます。
• self: リンクされたドキュメントをクリックされたフレーム自体で開きます。（デフォルト値）
• parent: リンクされたドキュメントを親フレームで開きます。
• top: リンクされたドキュメントをウィンドウ自体で開きます。

次のサンプルコードは、すべてのリンクをデフォルトで新規ウィンドウやタブで開くようにexternalLinkTargetオプションをblankに設定する方法を示します。

var viewer = new DsPdfViewer("#host", {
    externalLinkTarget: 'blank', 
    supportApi: 'api/pdf-viewer' 
    }
);