JavaScript PDF ビューアー入門ガイド | エクセルソフトブログ

このガイドでは、ニーズに合った JavaScript PDF ビューアーを選択し、実装する方法について説明します。以下の内容を学び、リソースを見つけましょう！

PDF ビューアーを Web アプリまたは Web ページに埋め込むための非常に人気のあるのオープンソースメソッドである PDF.js と React PDF。
より多くの機能やファイル形式のサポートなど、より複雑なニーズを持つプロジェクト向けの商用 JavaScript PDF SDK、Apryse WebViewer。使用を開始して機能をテストするためのサンプルが含まれています。

オープンソースの JavaScript PDF ビューアーの比較
1. React PDF
2. PDF.js
Apryse を使用して Javascript PDF ビューアーを構築
1. Apryse Javascript WebViewer の機能
2. Apryse WebViewer を使い始める方法
結論

オープンソースの JavaScript PDF ビューアーの比較

基本的な HTML および CSS メソッド使用して、Web サイトまたは Web ページから PDF を開くことができます。

ただし、場合によっては、ブラウザの組み込みビューアーよりも詳細にドキュメントの表示方法を制御する必要があります。また、ユーザーがアプリケーションから PDF をダウンロードできないように制限する必要がある場合もあります。

ここで、PDF ビューアーを埋め込むことが役に立ちます。Web アプリや Web ページに PDF ビューアーを埋め込むことができるオープンソースライブラリがあります。これらを使用すると、ドキュメントの表示方法をより細かく制御できます。また、選択に応じて、読書体験を豊かにする機能を増やしたり減らしたりできます。

おそらく最も人気のある 2 つの JS ライブラリは、PDF.js と React PDF です。どちらもダウンロードせずに PDF を直接解析、レンダリング、表示できますが、プロジェクトに影響を与えるさまざまなレベルのビューアー機能が付属しています。それでは、詳しく見ていきましょう。

React PDF

npm で毎週 100 万ダウンロード

利点

PDF を画像として表示するためのすぐに使える React コンポーネント
定期的に更新

考慮事項

独自のリーダー UI を構築する必要がある
内部的には PDF.js を使用している

同名の人気の JavaScript ライブラリをベースにした React PDF は、ブラウザーとサーバーの両方で PDF ファイルをレンダリングする方法として広く使用されています。インストールは比較的簡単で、Document や Page などのすぐに使えるコンポーネントが用意されています。また、定期的に更新され、最新の状態に保たれています。

とはいえ、React PDF の作成者である Wojciech Maj 氏は、 React PDF は「本格的な PDF リーダー」になることを意図したものではないと記載しています。むしろ、「PDF を簡単に表示して、その周りに UI を構築できるようにする」ために作成されています。つまり、React PDF にはすぐに使える UI は付属していません。代わりに、UI を構築する必要があります。

React PDF は PDF.js も内部で活用しているため、React PDF 貢献者コミュニティでは解決できない多くの問題にさらされています。たとえば、PDF.js に依存しているため、テキストの選択が困難になることがあります。また、テキストレイヤーが正しくないなどの問題も発生する可能性があり、React PDF 上に構築された検索機能やハイライト機能に課題が生じます。

ただし、ある程度のカスタマイズと時間をかければ、React PDF はあなたが求めている基本的な PDF 表示方法になるかもしれません。ドキュメントは npm と GitHub の両方から入手できます。

PDF.js

npm の週 270 万ダウンロード (プレビルド版)

利点

すぐに使えるリーダー UI
ズーム機能内蔵
複数の表示および検索オプション

考慮事項

テキスト選択とテキスト検索の信頼性が低い
「グラフィックを多用した」または複雑な PDF の扱いが難しい
Chrome、Firefox、Edge 以外のブラウザのサポートは制限あり
「PDF リーダーのみ」

React PDF ライブラリの背後にあるフレームワークである PDF.js は、おそらく最も人気のあるオープンソースの PDF ビューアーメソッドです。React PDF と同様に、無料で簡単に始めることができます。ただし、独自の UI を作成する機能に加えて、Mozilla のすぐに使用できる UI を提供する点が異なります。このすぐに使用できる UI には、組み込みの検索、複数の表示モード、最大 1,000 パーセントの拡大機能などの機能が備わっています。

これらは React PDF よりも進歩していますが、特にほとんどのデスクトップおよび一部のモバイル PDF ビューアーと比較すると、いくつかの重大な欠点もあります。たとえば、検索機能では、改行された結果は返されないため、重要な情報が見逃される可能性があります。同様に、ズーム機能は適切ではあるものの、複雑な設計図など、特に大きく詳細な画像を表示しようとすると不十分です。hacks.mozilla のベンチマークによると、PDF.js は複雑な PDF やグラフィックを多用する PDF では苦労することがあるため、特にその使用が制限される可能性があります。

PDF.js には、多くの技術的な問題もあります。これには、高ズームレベルでの画像品質の低下、古いブラウザーのサポートの制限、テキスト選択の精度の問題などが含まれます。この記事の執筆時点 (2024 年 10 月) で、GitHub には 381 件の問題が未解決のまま残っており、18 か月前より 40 件増えています。

ニーズに応じて、PDF.js は役立つ十分な基本機能を提供します。ドキュメントはプロジェクトの Web サイトで入手できます。

詳細については、PDF.js の評価に関する完全なガイドをご覧ください。

Apryse を使用して Javascript PDF ビューアーを構築

オープンソースの JavaScript PDF ライブラリは、一部のプロジェクトに最適です。ただし、より幅広いエディター機能や注釈機能、よりスムーズな UX を求める場合は、Apryse Webviewer などの JavaScript PDF SDK を検討することをお勧めします。

Apryse Javascript WebViewer の機能

Apryse WebViewer は、あらゆる Web アプリケーションの一部として高度なドキュメント処理を追加できる JavaScript PDF およびドキュメント SDK です。PDF の作成、注釈の追加、ドキュメントの共同作業、ブックマークやデジタル署名の挿入などを可能にする充実した機能セットが含まれています。レンダリングパフォーマンスと信頼性はクラス最高です。

WebViewer の機能のほとんどはブラウザーのクライアント側で実行されるため、アプリケーションに合わせてコスト効率よくスケールアップまたはスケールダウンでき、機能の安全な統合を合理化します。

Apryse WebViewer の機能

大規模で複雑な PDF でも、信頼性の高いプロフェッショナルなビューアーパフォーマンスを実現
Chrome、Firefox、Edge のモバイル版を含む最新のブラウザー間での一貫性
変換サーバーや MS Office ソフトウェアに依存せずに、MS Office ファイル (xlsx、pptx、docx) と画像を動的に表示
編集、ページ編成、透かし、PDF コンテンツの編集などのドキュメント生成と操作を実行 (サーバー不要)
完全な注釈、フォーム作成、フォーム入力、電子署名機能
API または GitHub の UI を介してフォークするための豊富なカスタマイズオプション
すべての JavaScript フレームワークをサポート (React、Angular、Vue.js など)
同じ JS SDK フレームワークで、音声、動画、CAD、Web サイトなどの追加フォーマットに対応

考慮事項

最も豊富なオプション
商用ライセンスあり (試用版を開始するにはライセンスキーは必要ありませんが、実稼働環境での使用についてはお問い合わせください。)

Apryse WebViewer を使い始める方法

Apryse JS WebViewer のインストールは npm 経由で行うことができます。npm がすでにインストールされている場合は、次の手順に従ってください。

注: WebViewer では静的リソース (バンドル不可) の提供が必要なため、これらの静的ファイルを dist ディレクトリに手動でコピーするという追加の手順が必要になります。

NPM 経由でインストール

プロジェクトで次のコマンドを実行します。

npm i @pdftron/webviewer

これにより、メインの JS エントリポイントがインストールされ、WebViewer の実行に必要ないくつかの静的アセットがダウンロードされます。

静的アセットをコピーする

次に、WebViewer を実行するために必要な静的アセットを、HTTP/HTTPS 経由で提供されるパブリックな場所 (通常は dist または build フォルダー) にコピーする必要があります。静的ファイルは node_modules/@pdftron/webviewer/public にあります。

このプロセスを自動化する方法をいくつか以下に示します。

1. NPM スクリプト

ビルドが完了した後に静的ファイルを移動するスクリプトを package.json に追加できます。これにより、ビルドが完了した後に必要なすべてのファイルが dist/public フォルダーにコピーされます。

{ 
  "scripts": { 
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer", 
    "build": "mybuildscript && npm run move-static" 
  } 
}

2. WebPack

webpack を使用してプロジェクトをバンドルしている場合は、copy-webpack-plugin を使用してファイルを自動的にコピーできます。

パッケージをインストールします:

npm install copy-webpack-plugin --save-dev

次に、webpack 構成に以下を追加します。

module.exports = { 

  ...otherConfig, 

  plugins: [ 
    new CopyPlugin([{ 
        from: './node_modules/@pdftron/webviewer/public', 
        to: './dist/public/webviewer'
      }] 
    ),
  ], 
};

3. Parcel

parcel を使用してプロジェクトをバンドルしている場合は、parcel-plugin-static-files-copy を使用してファイルをコピーできます。

パッケージをインストールします:

npmi parcel-plugin-static-files-copy --save-dev

次に、package.json に以下を追加します。

{ 
  "staticFiles": { 
    
    "staticPath": [ 
      { 
        "staticPath": "node_modules/@pdftron/webviewer/public", 
        "staticOutDir": "public/webviewer" 
      } 
    ], 
    "watcherGlob": "**" 
  } 
}

4. その他

別のパッケージマネージャーを使用している場合は、ビルド時に静的ファイルをコピーするプラグインを探してください。

使用法

コード内で WebViewer を使用する場合は、path パラメータを使用してこれらの静的ファイルをコピーした場所を指定する必要があります。

たとえば、静的ファイルを dist/public/webviewer にコピーした場合、コードは次のようになります。

WebViewer({ 

  path: '/public/webviewer', 

}, document.getElementById('viewer')) 
  .then(instance => { 
    const { UI, Core } = instance;
    const { documentViewer, annotationManager, Tools, Annotations } = Core; 
    // call methods from UI, Core, documentViewer and annotationManager as needed 
    documentViewer.addEventListener('documentLoaded', () => { 
      // call methods relating to the loaded document 
    }); 

    instance.UI.loadDocument('http://fileserver/documents/test.pdf'); 

  })

詳細については、 WebViewer の標準 API の使用に関するチュートリアル、 Javascript を使用してさまざまなドキュメントを表示するサンプル、その他の多くのガイドをご覧ください。

また、JavaScript PDF ビューアーを埋め込む方法、JavaScript で PDF を生成する方法、JavaScript を使用して docx を PDF として生成して保存する方法を知りたい方向けの興味深い記事も紹介しています。

結論

最新のブラウザーのほとんど、および多くの iOS および Android アプリには、すでに独自の組み込み JavaScript PDF ビューアーが採用されていますが、独自のビューアーを埋め込むことで、ユーザーが PDF で表示および実行できる内容をさらに細かく制御できます。基本的なビューアー機能については、PDF.js や React PDF などの人気のオープンソースビューアーオプションを利用できます。ただし、Apryse WebViewer は、柔軟性と機能の両方においてはるかに幅広い範囲を提供します。

Apryse では無償トライアルも提供しています。是非お試しください。

Apryse 製品の詳細は、弊社 Web サイトをご確認ください。