TL;DR
- PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。
- ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。
- しかし 3rd party library / service の利用はバンドルサイズやランタイムでの変換にコストがかかるため、なるべくブラウザネイティブなやり方で PDF を開きつつ、一部ブラウザ向けに対してのみ 3rd party library/service 経由で表示するように分岐させたい。
- どのブラウザならブラウザネイティブの機能が使えるかを調べるために、サポート範囲の全端末・全ブラウザで PDF の描画結果を比較・調査した。
はじめに
業務委託エンジニアの井手(@sadnessOjisan)です。 今回は KAIZEN Sales の開発で作った "全ブラウザ・全端末対応の PDF コンポーネント" を作るにあたって、PDF の埋め込み方法について調査した結果を紹介します。
先に結果を書くと以下の通りです。
| - | Chrome (PC) |
Safari (PC) |
Firefox (PC) |
Safari (SP) |
Chrome (SP) |
IE |
|---|---|---|---|---|---|---|
| iframe | ○ | △（no toolbar） | ○ | ×(1 枚目のみ) | × | × |
| object | ○ | △（no toolbar） | ○ | ×(1 枚目のみ) | × | × |
| embed | ○ | △（no toolbar） | ○ | ×(1 枚目のみ) | × | × |
| Google Drive | ○ | ○ | ○ | △（不安定） | ○ | △（不安定） |
| PDF.js(2.3.2~) | ○ | ○ | ○ | ○ | ○ | × |
| PDF.js legacy(2.3.2~) | ○ | ○ | ○ | ○ | ○ | × |
| PDF.js(~2.3.2) | ○ | ○ | ○ | ○ | ○ | ○ |
KAIZEN Sales の説明と PDF コンポーネントの要件
KAIZEN Sales は企業が商談や営業に使う動画販促資料を管理するプラットフォームです。 その中に顧客企業がリンクを発行して、利用者にそのリンクの中にある動画や画像や PDF を見せてアンケートを取る機能があります。 今回僕が開発していたのはこのリンクで開かれるアンケートページと、そのリンク先にあるアンケートを顧客 HP にそのまま埋め込める 3rd party script です。
(※ Big Buck Bunney is licensed under CC-BY.)
この案件ではユーザーがコンテンツを視聴するページを開発し、その中で PDF を閲覧できるようにしました。ただこの PDF（コンテンツ）表示ページは外部リンクや 3rd party script として広く配布されるため PV も大きくなりやすく、また PC/Mobile や サポート対象の全ブラウザへの対応が必須となりました。
そこで、どの方法を使ってどの端末でアクセスすると PDF が表示されないかを調べるために、実験用の web サイトを作って、いろいろな方法や端末やブラウザを実験していました。 こちらがその実験用のサイトです。
FYI: https://github.com/ojisan-toybox/universal-pdf-component
続きを読む
