WebViewer の JavaScript ライブラリの概要

WebViewer は、PDF、Office ドキュメント、画像、動画などの各種形式のファイルを閲覧、注釈、編集するための JavaScript ライブラリです。最も簡単な方法として、アプリ内で WebViewer が配置される DOM 要素を渡し、WebViewer にドキュメントの URL を提供することでドキュメントを表示することができます。

JavaScript

WebViewer({
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
}, document.getElementById('viewer')).then(instance => {
  // WebViewer is initialized
});

裏側では、デフォルトの WebViewer UI をインスタンス化し、ドキュメントを読み込む iframe が作成されています。UI をカスタマイズしたり、ビューアーやドキュメントを操作するための API が用意されています。下位の API では、独自のビューアーを作成したり、UI を使用せずにドキュメントを処理することができます。

どのように機能するの？

WebViewer は、WebAssembly のようなクライアントサイドの技術を利用して、PDF を素早く解析し、レンダリングします。Apryse の C++ SDK はモジュールにコンパイルされており、ブラウザーに直接読み込むことができます。

これは、ドキュメントのレンダリング作業が完全にブラウザーによって行われ、サーバーが不要であることを意味します。サーバーは、ドキュメントと JavaScript ファイルを静的にホストするためだけに使用されるかもしれませんが、ユーザーのコンピューターからローカル ファイルを読み込むことも可能です。レンダリングがクライアントで行われるということは、レンダリングを行うサーバーのメンテナンスやスケーリングを心配する必要がないことを意味します。

クライアント レンダリング使用時には、PDF、画像、Office ドキュメントを読み込むことが可能です。

クライアントサイドだけでは不十分な場合とは？

クライアントサイド レンダリングは、最新のブラウザーとそれなりに高性能なデバイスを使用している場合にはうまく機能しますが、ユーザー ベースの大部分が Internet Explorer や低性能なモバイル デバイスを使用している場合はどうでしょうか。クライアントサイド レンダリングはまだ機能しますが、ユーザーにとって許容できるパフォーマンスではないかもしれません。

WebViewer Server は、WebViewer のドロップイン バックエンドで、レスポンシブ表示とすべてのクライアント プラットフォームとの互換性を提供し、純粋なクライアントサイド ソリューションに近いスケーリング パフォーマンスを実現します。WebViewer Server はクライアントの WebViewer と連動し、最初に画像を提供した後、クライアントサイド レンダリングに移行します。

サーバーは Docker コンテナーで実行されるので、素早く簡単にセットアップができ、試してみることができます。サーバーがデプロイされると、追加のコンストラクター オプションである webviewerServerURL を渡すだけで、同じ WebViewer API を使用してドキュメントとやり取りできるようになります。

JavaScript (SDK v8.0+)

WebViewer({
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  // demo.apryse.com はデモ用です。実際には自分のサーバー URL に置き換えてください
  webviewerServerURL: 'https://demo.apryse.com'
}, document.getElementById('viewer')).then(instance => {
  // WebViewer is initialized
});

JavaScript (SDK v7.0+)

WebViewer({
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  // demo.apryse.com はデモ用です。実際には自分のサーバー URL に置き換えてください
  pdftronServer: 'https://demo.apryse.com'
}, document.getElementById('viewer')).then(instance => {
  // WebViewer is initialized
});

内部的には、WebViewer はドキュメントの URL をサーバーに渡し、サーバーはそれをダウンロードし処理します。クライアント デバイスおよびブラウザーの機能とドキュメントのプロパティに基づいて、WebViewer Server はクライアント モジュールがロードされるとクライアント レンダリングに切り替えたり、クライアント レンダリング用にドキュメントを最適化したり、サーバーでのレンダリングを継続したりします。

サーバーをもっと制御したい場合は？

WebViewer Server は Docker コンテナーまたは Tomcat の直接インストーラーとして提供され、設定用のオプションもかなり充実していますが、場合によってはサーバー環境をよりコントロールできることが望ましいかもしれません。WebViewer サーバーの裏側では、Apryse のネイティブ PDF SDK を使用してファイルのレンダリングと最適化を行っており、これらの同じ API を自分のサーバーで利用することができます。クロスプラットフォーム SDK は Linux、Windows、Mac に対応し、様々な言語で利用可能です。

Apryse サーバー SDK を使用すると、様々な種類のドキュメントを、あらゆるブラウザーやデバイスの WebViewer で素早くレンダリングできる、XOD と呼ばれる Web 最適化 XPS ファイルへ変換することができます。XOD ファイルを使用することで、最高のパフォーマンスを得るためにドキュメントを事前に変換するワークフローも可能になります。カスタム サーバーの展開について詳しくは、こちらをご覧ください。

より多くのファイル形式をサポートする

WebViewer Server は、パフォーマンスの向上だけでなく、CAD ドキュメントを含む他の多くのドキュメント形式の読み込みもサポートしています。対応ファイル形式の全一覧はこちらをご覧ください。

WebViewer Server では、サポートされているドキュメント タイプの 1 つに URL を渡すだけで、WebViewer に読み込ませることができます。自分のサーバーで Apryse SDK を使用する場合、まずドキュメントを XOD または PDF に変換する必要があります。

まとめ

• クライアントのみの設定は、ファイルをホストする静的なサーバーが必要なだけで、処理はすべてクライアント側のブラウザーで行われるため、設定と維持が最も簡単です。一般的には、まずこのオプションを試してみることをお勧めします。
• 古いブラウザーや低機能なデバイス、より多くのファイル形式をサポートする必要がある場合は、ドキュメントの展開と処理を簡素化する WebViewer Server が推奨されます。サーバーに必要なのは URL だけで、ドキュメントを素早くレンダリングできるため、既存のファイル保存場所を変更する必要がありません。
• WebViewer Server と同様の利点を持ちながら、さらにサーバー環境をコントロールしたい場合は、カスタム サーバー デプロイメントを使用することができます。この場合、サーバー側の Apryse SDK を使用し、WebViewer に送信する前に自身でドキュメントを処理する必要があります。