PDF ファイルを Garoon の HTML ポートレットに表示しよう
はじめに
Garoon のポータル上で PDF ファイルを表示したいと感じることはありませんか。
本記事では、Garoon の HTML ポートレット上に PDF ファイルを表示する方法を紹介します。
ポータルを開くだけで PDF ファイルが表示されるため、社内に広く周知させたい PDF ファイルや、よく参照される PDF ファイルを配置することで、わざわざ手動でダウンロードして閲覧する手間を省けて、業務の効率化に貢献できるかと思います。
動作環境と注意事項
- Google Chrome や Microsoft Edge、Mozilla Firefox 等のブラウザーを利用してください。
- HTML を編集するときの注意点は、
Garoon ヘルプサイト
を確認してください。
完成イメージ
本記事では、2 つのパターンでの表示方法を紹介します。
1. 外部の PDF ファイルを表示する方法
Garoon の外部にある PDF ファイルを表示しています。
この方法では、縦スクロールで PDF ファイルを閲覧できます。
2. Garoon のファイル管理内の PDF ファイルを表示する方法
Garoon のファイル管理内に保存した PDF ファイルを表示しています。
この方法では、ボタンを押下することで、PDF ファイル内の次のページ(前のページ)を閲覧できます。
1. 外部の PDF ファイルを表示する方法
表示する PDF ファイルの準備
HTML ポートレットに表示する PDF ファイルの URL を確認しておきます。
Garoon のファイル管理内の URL の場合、ポートレットの画面を表示する毎、ローカルに PDF ファイルをダウンロードする挙動となります。
ファイル管理内(Garoon 内)に保存した PDF ファイルを表示する場合は、「2.」の方法を利用してください。
HTML ポートレットの作成
新規に作成した HTML ポートレットの「ポートレットの内容」に、以下のコードを記載します。
このとき、コード内の「https://XXXXX」の部分(3箇所)を、「表示する PDF ファイルの準備」で確認した PDF ファイルの URL に書き換えます。
|
|
object タグで表示ができない場合は iframe タグで表示、iframe タグでも表示ができない場合は、PDF ファイルをダウンロードするハイパーリンクが表示されるようになっています。
ツールバーの表示
https://XXXXX の末尾に「#toolbar=0」をつけることで、以下のようにツールバーの表示の有無を切り替えることができます。
2. Garoon のファイル管理内の PDF ファイルを表示する方法
表示する PDF ファイルの準備
HTML ポートレットに表示する PDF ファイルの URL を確認しておきます。
Garoon のファイル管理に保存している PDF ファイルを HTML ポートレットに表示します。
ファイル管理の一覧画面で表示したい PDF ファイルのダウンロードボタンを右クリック>[リンクのアドレスをコピー]をクリックして得られる URL をメモしておきます。(★1)
ライブラリの準備
ライブラリとして、
Garoon html/css/image-Kit for Customize と
PDF.js
を利用します。
以下のバージョンで動作確認しています。
- PDF.js v2.7.570
- Garoon html/css/image-Kit for Customize
Garoon html/css/image-Kit for Customize の準備
以下の Github から CSS ファイル(grn_kit.css)をダウンロードします。
https://github.com/garoon/css-for-customize
PDF.js の準備
ダウンロードページ
の Download > Prebuilt > Stable(vX.X.XXX)からダウンロードした zip ファイルを展開します。
ファイル管理の任意のフォルダーに、zip 展開したフォルダーの build 配下の pdf.worker.js を読み込み、ダウンロードボタンを右クリック>[リンクのアドレスをコピー]をクリックして得た URL をメモしておきます。(★2)
HTML ポートレットの作成
新規に作成した HTML ポートレットの「ポートレットの内容」に、以下のコードを記載します。
|
|
「viewPDF.js」を作成します。(文字コードは「UTF-8」で保存してください)
このとき、13 行目の https://YYYYY に(★1)の PDF の URL を、16 行目の https://ZZZZZ に(★2)の pdf.worker.js の URL を書き換えます。
|
|
作成した「viewPDF.js」と、ダウンロードした CSS ファイル(grn_kit.css)、JavaScript ファイル(pdf.js)を「JavaScript / CSS によるカスタマイズ」画面で読み込みます。
JavaScript ファイルは次の順番で設定してください。
- pdf.js
- viewPDF.js
おわりに
PDF ファイルを Garoon の HTML ポートレットに表示する方法を紹介しました。
この方法を利用することで、PDF ファイルを画像に変換して HTML ポートレットへ貼り付けたり、頻繁に参照する PDF ファイルをローカルにダウンロードする必要なく閲覧ができます。
この Tips が社内でのポータル活用の手助けになれば幸いです。
この Tips は、2021 年 4 月版 Garoon で動作を確認しています。