2020年の今できる、PDFのWeb組み込み実装方法リスト

とある用件でPDFをモバイルでブラウザでみれうような機能が欲しいと話があり、色々調べた結果そう簡単なソリューションがなかったので、無かったという事実をここに記したい。

しかしながら、今回の私の場合の要件ほどシビアではない場合はモバイルではできることもあるのでご一読いただきたい。

要件

１）PDFをブラウザで見たい
２）PDFのページ数が200ページある
３）PDF内の文字列検索をしたい
４）ロードはもちろん軽く
５）モバイルアプリはNG
６）PDF自体はレスポンシブでなくていよい

調べた実装方法一覧

Google Docs Viewer

2020年3月現在サービス終了しており実装不可

PDF.js

PDFをjavascriptのCANVAS(画像）に変換してその上に、PDFから抽出したテキストを配置することで検索、ブラウザで閲覧可能にするライブラリ。
実装はとっても楽で、パワポベースのPDFであればこれはオススメ。しかしマニュアルのような大量ページのPDFの場合はロードが大変時間がかかるので実装したが有効ではなかった。
もし、ページ数が少なくて実装できる案件の場合は、一度PDFをPDF/A フォーマットに変化するとスピードが早くなるのでお試しください。
https://mozilla.github.io/pdf.js/

PDFをHTMLに変換するサービスの利用

もうPDFとして扱うのをやめてしまいHTMLとして扱うやり方。
検索機能を求めないならこれが軽くてよい。

難点はページごとに１HTMLファイルとして生成され、メインのHTMLで次のページに遷移するときに非同期で次のページを読み込む方式であるため、全ページ検索ができない。
そのためこれはやめた。
https://www.pdftohtml.net/

Adobe document cloud

無料のアカウントであるadobe document cloudで見せ方などを設定し、出力されたタグをHTMLにはると、拡大、検索などある程度の機能をセットでPDFをHTML内にPDFを表示できる。
難点はズーム、検索などの機能メニューのデザインがレスポンシブ対応していないこと。あとさすがに２００ページは重かった。

まとめ

結果、お客様にはモバイルアプリでPDFを扱うことを提案した。（提案でもなんでないけど）
まだまだブラウザには限界がありますね。

ご参考まで。