PDFファイルの画面表示

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用いて、ブロックtoブロックで PDF ファイルを表示する方法を紹介します。

2. サンプル機能の内容と確認ポイント

明細の「表示」ボタンは、ブロック to ブロック機能の呼出し用ボタンです。
押下時に、DB の FILEPATH に登録された PDF ファイルのパスを引数として、単票ブロックに渡します。

PDFの表示には「フリーレイアウト設定」を使用し、左側に明細ブロック、右側に単票ブロックを配置するレイアウトに変更しています。

PDF表示には PDF.js ライブラリを使用します。以下のディレクトリに任意のフォルダを作成し、ライブラリを配置してください。

C:\payara6\glassfish\domains\production\docroot\usr

後述の Client-side JavaScript 内で、<embed> タグの src 属性により、上記フォルダに配置したファイルを読み込みます。

ブロック to ブロック機能の設定（明細画面で設定）

• 「項目情報」

  FILEPATH 項目の「コンポーネント」は「非表示（HIDDEN）」に設定します。

• 「他画面呼出」

  「機能ID」に単票ブロックを指定し、「設定」を押下後、以下の通りに設定します。

  • 「遷移先項目」：FILEPATH

  • 「式」：=

  • 「項目」：FILEPATH

Client-side JavaScript の実装内容は以下の通りです。

resizeContents_end 関数内で、PDFの表示処理を実行します。

1. 単票ブロックのファイルパス項目 2_FILEPATH を取得します。

2. 取得した値を encodeURIComponent でエンコードします。

3. エンコード済みの値を <embed> タグの src 属性に設定します。

4. 単票ブロックのファイル表示項目 TLN_2_FILEDISP を取得します。

5. 同項目の親要素 <td> を取得し、innerHTML に <embed> タグを設定します。

🔍 確認いただけるポイント

• 「表示」ボタン押下時に、PDFが正しく表示されること

3. 画面イメージ

以下は、「表示」ボタン押下後にPDFが表示された状態を示しています。

!++++

使用したコード一覧

!----